Je voudrais demander s'il est possible d'utiliser Chart.js afficher les valeurs des données? Je veux imprimer le graphique.
Merci pour tout conseil.
Je voudrais demander s'il est possible d'utiliser Chart.js afficher les valeurs des données? Je veux imprimer le graphique.
Merci pour tout conseil.
Réponses:
Modification tardive: il existe un plugin officiel pour Chart.js 2.7.0+
pour ce faire: https://github.com/chartjs/chartjs-plugin-datalabels
Réponse originale:
Vous pouvez parcourir les points / barres surAnimationComplete et afficher les valeurs
Aperçu
HTML
<canvas id="myChart1" height="300" width="500"></canvas>
<canvas id="myChart2" height="300" width="500"></canvas>
Scénario
var chartData = {
labels: ["January", "February", "March", "April", "May", "June"],
datasets: [
{
fillColor: "#79D1CF",
strokeColor: "#79D1CF",
data: [60, 80, 81, 56, 55, 40]
}
]
};
var ctx = document.getElementById("myChart1").getContext("2d");
var myLine = new Chart(ctx).Line(chartData, {
showTooltips: false,
onAnimationComplete: function () {
var ctx = this.chart.ctx;
ctx.font = this.scale.font;
ctx.fillStyle = this.scale.textColor
ctx.textAlign = "center";
ctx.textBaseline = "bottom";
this.datasets.forEach(function (dataset) {
dataset.points.forEach(function (points) {
ctx.fillText(points.value, points.x, points.y - 10);
});
})
}
});
var ctx = document.getElementById("myChart2").getContext("2d");
var myBar = new Chart(ctx).Bar(chartData, {
showTooltips: false,
onAnimationComplete: function () {
var ctx = this.chart.ctx;
ctx.font = this.scale.font;
ctx.fillStyle = this.scale.textColor
ctx.textAlign = "center";
ctx.textBaseline = "bottom";
this.datasets.forEach(function (dataset) {
dataset.bars.forEach(function (bar) {
ctx.fillText(bar.value, bar.x, bar.y - 5);
});
})
}
});
Violon - http://jsfiddle.net/uh9vw0ao/
onComplete
rappel ici, mais il se déclenche également lorsque le survol de la souris est sur la barre du graphique, provoquant le clignotement du nombre en raison du redessiner onAnimationComplete
. Je ne peux pas utiliser ce rappel avec mon code de graphique existant (voir var chartBar
en bas pastebin.com/tT7yTkGh )
Voici une version mise à jour pour Chart.js 2.3
23 septembre 2016: J'ai modifié mon code pour qu'il fonctionne avec la v2.3 pour le type ligne / barre.
Important: même si vous n'avez pas besoin de l'animation, ne modifiez pas l'option de durée sur 0, sinon vous obtiendrez une erreur chartInstance.controller is undefined .
var chartData = {
labels: ["January", "February", "March", "April", "May", "June"],
datasets: [
{
fillColor: "#79D1CF",
strokeColor: "#79D1CF",
data: [60, 80, 81, 56, 55, 40]
}
]
};
var opt = {
events: false,
tooltips: {
enabled: false
},
hover: {
animationDuration: 0
},
animation: {
duration: 1,
onComplete: function () {
var chartInstance = this.chart,
ctx = chartInstance.ctx;
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
this.data.datasets.forEach(function (dataset, i) {
var meta = chartInstance.controller.getDatasetMeta(i);
meta.data.forEach(function (bar, index) {
var data = dataset.data[index];
ctx.fillText(data, bar._model.x, bar._model.y - 5);
});
});
}
}
};
var ctx = document.getElementById("Chart1"),
myLineChart = new Chart(ctx, {
type: 'bar',
data: chartData,
options: opt
});
<canvas id="myChart1" height="300" width="500"></canvas>
Cette option d'animation fonctionne pour 2.1.3 sur un graphique à barres.
Réponse @Ross légèrement modifiée
animation: {
duration: 0,
onComplete: function () {
// render the value of the chart above the bar
var ctx = this.chart.ctx;
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, 'normal', Chart.defaults.global.defaultFontFamily);
ctx.fillStyle = this.chart.config.options.defaultFontColor;
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
this.data.datasets.forEach(function (dataset) {
for (var i = 0; i < dataset.data.length; i++) {
var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;
ctx.fillText(dataset.data[i], model.x, model.y - 5);
}
});
}}
hover: {animationDuration: 0}
pour arrêter l'animation des étiquettes en survol
.filter(dataset => !dataset._meta[0].hidden)
Je pense que la meilleure option pour faire cela dans chartJS v2.x consiste à utiliser un plugin, vous n'avez donc pas un gros bloc de code dans les options. De plus, il empêche les données de disparaître lors du survol d'une barre.
C'est-à-dire utiliser simplement ce code, qui enregistre un plugin qui ajoute le texte une fois le graphique dessiné.
Chart.pluginService.register({
afterDraw: function(chartInstance) {
var ctx = chartInstance.chart.ctx;
// render the value of the chart above the bar
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, 'normal', Chart.defaults.global.defaultFontFamily);
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
chartInstance.data.datasets.forEach(function (dataset) {
for (var i = 0; i < dataset.data.length; i++) {
var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;
ctx.fillText(dataset.data[i], model.x, model.y - 2);
}
});
}
});
Chart.defaults.global.tooltips.enabled = false;
. Le problème avec cette solution est que la afterDraw
fonction est appelée des centaines de fois, générant probablement une surcharge du processeur. Pourtant, c'est la seule réponse pour l'instant sans cligner des yeux. Si vous avez besoin d'un meilleur rendu pour les horizontalBar
graphiques, utilisez ctx.textAlign = 'left'; ctx.textBaseline = 'middle';
et ctx.fillText(dataset.data[i], model.x+5, model.y);
.
Sur la base de la réponse de @ Ross pour Chart.js 2.0 et plus, j'ai dû inclure un petit ajustement pour me prémunir contre le cas lorsque les hauteurs de la barre sont trop choisies pour la limite de l'échelle.
L' animation
attribut de l'option du graphique à barres:
animation: {
duration: 500,
easing: "easeOutQuart",
onComplete: function () {
var ctx = this.chart.ctx;
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
this.data.datasets.forEach(function (dataset) {
for (var i = 0; i < dataset.data.length; i++) {
var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model,
scale_max = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._yScale.maxHeight;
ctx.fillStyle = '#444';
var y_pos = model.y - 5;
// Make sure data value does not get overflown and hidden
// when the bar's value is too close to max value of scale
// Note: The y value is reverse, it counts from top down
if ((scale_max - model.y) / scale_max >= 0.93)
y_pos = model.y + 20;
ctx.fillText(dataset.data[i], model.x, y_pos);
}
});
}
}
ctx.save()
à la fin mais cela n'a pas aidé
onComplete
rappel est exécuté lorsque j'ai survolé la barre, ce qui fait que le redessiner et le texte semblent clignoter.Est-ce que ce serait la même chose avec onAnimationComplete
? Je ne peux pas utiliser le onAnimationComplete
rappel avec mon code existant (voir var chartBar
en bas de pastebin. com / tT7yTkGh
Si vous utilisez le plugin chartjs-plugin-datalabels, l'objet d'options de code suivant vous aidera
Assurez-vous d'importer import 'chartjs-plugin-datalabels';
dans votre fichier dactylographié ou d'ajouter une référence à <script src="chartjs-plugin-datalabels.js"></script>
dans votre fichier javascript.
options: {
maintainAspectRatio: false,
responsive: true,
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
}
}]
},
plugins: {
datalabels: {
anchor: 'end',
align: 'top',
formatter: Math.round,
font: {
weight: 'bold'
}
}
}
}
Suite à cette bonne réponse , j'utiliserais ces options pour un graphique à barres:
var chartOptions = {
animation: false,
responsive : true,
tooltipTemplate: "<%= value %>",
tooltipFillColor: "rgba(0,0,0,0)",
tooltipFontColor: "#444",
tooltipEvents: [],
tooltipCaretSize: 0,
onAnimationComplete: function()
{
this.showTooltip(this.datasets[0].bars, true);
}
};
window.myBar = new Chart(ctx1).Bar(chartData, chartOptions);
Celui-ci utilise toujours le système d'info-bulles et ses avantages (positionnement automatique, templating, ...) mais cachant les décorations (couleur de fond, caret, ...)
this.datasets[0].points
lieu de .bars
. Je préfère cette solution car elle utilise le système d'info-bulles.
onComplete
rappel d' animations, mais cela se déclenche même lorsque survolé les barres du graphique, ce qui fait que le texte se redessine et donne un effet de clignotement indésirable.J'ai également essayé afterDraw
et c'est tout de même. ne se produit pas dans le violon fourni par potatopeelings.Any Ideas plz?
À partir d'exemples de chart.js (fichier Chart.js-2.4.0 / samples / data_labelling.html):
`` `` // Définir un plugin pour fournir des étiquettes de données
Chart.plugins.register({
afterDatasetsDraw: function(chartInstance, easing) {
// To only draw at the end of animation, check for easing === 1
var ctx = chartInstance.chart.ctx;
chartInstance.data.datasets.forEach(function (dataset, i) {
var meta = chartInstance.getDatasetMeta(i);
if (!meta.hidden) {
meta.data.forEach(function(element, index) {
// Draw the text in black, with the specified font
ctx.fillStyle = 'rgb(0, 0, 0)';
var fontSize = 16;
var fontStyle = 'normal';
var fontFamily = 'Helvetica Neue';
ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);
// Just naively convert to string for now
var dataString = dataset.data[index].toString();
// Make sure alignment settings are correct
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
var padding = 5;
var position = element.tooltipPosition();
ctx.fillText(dataString, position.x, position.y - (fontSize / 2) - padding);
});
}
});
}
});
''
Je recommanderais d'utiliser ce plugin: https://github.com/chartjs/chartjs-plugin-datalabels
Des étiquettes peuvent être ajoutées à vos graphiques simplement en important le plugin dans le fichier js, par exemple:
import 'chartjs-plugin-datalabels'
Et peut être affiné à l'aide de ces documents: https://chartjs-plugin-datalabels.netlify.com/options.html
A légèrement modifié la réponse de @ ajhuddy. Uniquement pour les graphiques à barres . Ma version ajoute:
Inconvénient: lorsque vous survolez une barre qui a une valeur à l'intérieur, la valeur peut sembler un peu irrégulière. Je n'ai pas trouvé de solution pour désactiver les effets de survol. Il peut également avoir besoin d'être peaufiné en fonction de vos propres paramètres.
Configuration:
bar: {
tooltips: {
enabled: false
},
hover: {
animationDuration: 0
},
animation: {
onComplete: function() {
this.chart.controller.draw();
drawValue(this, 1);
},
onProgress: function(state) {
var animation = state.animationObject;
drawValue(this, animation.currentStep / animation.numSteps);
}
}
}
Aides:
// Font color for values inside the bar
var insideFontColor = '255,255,255';
// Font color for values above the bar
var outsideFontColor = '0,0,0';
// How close to the top edge bar can be before the value is put inside it
var topThreshold = 20;
var modifyCtx = function(ctx) {
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, 'normal', Chart.defaults.global.defaultFontFamily);
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
return ctx;
};
var fadeIn = function(ctx, obj, x, y, black, step) {
var ctx = modifyCtx(ctx);
var alpha = 0;
ctx.fillStyle = black ? 'rgba(' + outsideFontColor + ',' + step + ')' : 'rgba(' + insideFontColor + ',' + step + ')';
ctx.fillText(obj, x, y);
};
var drawValue = function(context, step) {
var ctx = context.chart.ctx;
context.data.datasets.forEach(function (dataset) {
for (var i = 0; i < dataset.data.length; i++) {
var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;
var textY = (model.y > topThreshold) ? model.y - 3 : model.y + 20;
fadeIn(ctx, dataset.data[i], model.x, textY, model.y > topThreshold, step);
}
});
};
calculateTickRotation
, c'est dans la fonction Scale. Je vais l'analyser.
D'après mon expérience, une fois que vous avez inclus le plugin chartjs-plugin-datalabels (assurez-vous de placer le<script>
balise après la balise chart.js sur votre page), vos graphiques commencent à afficher des valeurs.
Si vous choisissez ensuite, vous pouvez le personnaliser en fonction de vos besoins. La personnalisation est clairement documentée ici mais fondamentalement, le format est comme cet exemple hypothétique:
var myBarChart = new Chart(ctx, {
type: 'bar',
data: yourDataObject,
options: {
// other options
plugins: {
datalabels: {
anchor :'end',
align :'top',
// and if you need to format how the value is displayed...
formatter: function(value, context) {
return GetValueFormatted(value);
}
}
}
}
});