Comment faire pour afficher la Ligne Graphique dataset étiquettes de point avec Chart.js?

J'ai une exigence de conception pour afficher une ligne graphique avec 5 jeux de données de tendances des données. Chaque valeur de données le long de la course des lignes doivent être montrant une étiquette de valeur de données de son point de données.

Malheureusement, je ne trouve pas l'option dans les Charts.js qui permettra de satisfaire à cette exigence.

Est-il une solution qui peut m'aider?

J'ai posté ça sur le violon trop: http://jsfiddle.net/s9eannLh/

Merci beaucoup!

    var data = {
labels: ["","Jun 2013","Jul 2013","Aug 2013","Sep 2013","Oct 2013","Nov 2013","Dec 2013","Jan 2014","Feb 2014","Mar 2014","Apr 2014","May 2014"],
datasets: [
{
label: "hemoglobin_1",
title: "test",
fillColor: "transparent",
strokeColor: "#65204c",
pointColor: "#65204c",
pointHighlightStroke: "#FFF",
data: [null,5.7,5.7,5.8,5.7,5.8,5.7,5.9,6.7,6.7,6.5,6.4,6.4]
},
{
label: "hemoglobin_2",
fillColor: "transparent",
strokeColor: "#ed7141",
pointColor: "#ed7141",
pointHighlightStroke: "#FFF",
data: [null,15.5,15.5,15.6,15.2,15.6,15.1,15.8,17,17.4,16.8,16.4,16.4]
},                    
{
label: "hemoglobin_3",
fillColor: "transparent",
strokeColor: "#de4760",
pointColor: "#de4760",
pointHighlightStroke: "#FFF",
data: [null,37.1,37,37.2,37.6,36.9,37.6,36.8,37.6,38,37.5,39.1,37.5]
},
{
label: "hemoglobin_4",
fillColor: "transparent",
strokeColor: "#fdcf7e",
pointColor: "#fdcf7e",                          
pointHighlightStroke: "#FFF",
data: [null,29.9,30.4,29.5,29.6,30.2,29.4,29.8,26.9,27,28.5,26.8,28.5]
},                                        
{
label: "hemoglobin_5",
fillColor: "transparent",
strokeColor: "#a33a59",
pointColor: "#a33a59",
pointHighlightStroke: "#FFF",
data: [null,11.8,11.4,11.9,11.9,11.5,12.2,11.7,11.8,10.9,10.7,11.3,11.3]
}
]
};
var options = {
responsive: true,
scaleOverride: true,
scaleSteps: 10,
scaleStepWidth: 5,
scaleStartValue: 0,
showTooltips: false,
pointDot: true,
pointDotRadius : 6,
datasetStrokeWidth : 3,
bezierCurve : false,
scaleShowHorizontalLines: false,
scaleGridLineWidth : 2,
scaleGridLineColor : "#EEEEEE",
scaleLineWidth: 3,
scaleLineColor: "#000000",
scaleFontFamily: '"Gotham Book",sans-serif',
scaleFontSize: 18
}
var ctx = $("#myChart").get(0).getContext("2d");
var Trends = new Chart(ctx).Line(data, options);

OriginalL'auteur JBMcClure | 2015-01-09

J'ai pu enfin trouver la solution à cette question.

J'ai réalisé que j'avais accès à l'objet graphique dans les DOM:

Trends.datasets

Au sein de chacune des cinq ensembles de données, il a été un des points de l'objet contenant x & y des positions:

Trends.datasets[0..4].points

J'ai donc analysé à travers les points avec un rappel en utilisant la configuration globale des fonctions dans Chart.js:

    //Function - Will fire on animation progression.
onAnimationProgress: function(){},
//Function - Will fire on animation completion.
onAnimationComplete: function(){}

J'ai trouvé que j'ai eu à utiliser onAnimationComplete avec responsive: true parce que le point d'étiquettes obtenir anéanti sur un événement de redimensionnement.

Une fois j'ai trouvé les points dans le rappel, j'ai simplement écrit les étiquettes que je voulais sur la toile.

Mes ajouts au code:

var options = {
onAnimationProgress: function() { drawDatasetPointsLabels() },
onAnimationComplete: function() { drawDatasetPointsLabels() }
}

Avec l'ajout de la fonction:

    function drawDatasetPointsLabels() {
ctx.font = '.9rem "Gotham Book",sans-serif';
ctx.fillStyle = '#AAA';
ctx.textAlign="center";
$(Trends.datasets).each(function(idx,dataset){
$(dataset.points).each(function(pdx,pointinfo){
//First dataset is shifted off the scale line. 
//Don't write to the canvas for the null placeholder.
if ( pointinfo.value !== null ) { 
ctx.fillText(pointinfo.value,pointinfo.x,pointinfo.y - 15);
}
});
});         
}

Voici donc l'intégralité du code source en même temps que le nouveau code qui donne la solution:

    var data = {
labels: ["","Jun 2013","Jul 2013","Aug 2013","Sep 2013","Oct 2013","Nov 2013","Dec 2013","Jan 2014","Feb 2014","Mar 2014","Apr 2014","May 2014"],
datasets: [
{
label: "hemoglobin_1",
fillColor: "transparent",
strokeColor: "#65204c",
pointColor: "#65204c",
pointHighlightStroke: "#FFF",
data: [null,5.7,5.7,5.8,5.7,5.8,5.7,5.9,6.7,6.7,6.5,6.4,6.4]
},
{
label: "hemoglobin_2",
fillColor: "transparent",
strokeColor: "#ed7141",
pointColor: "#ed7141",
pointHighlightStroke: "#FFF",
data: [null,15.5,15.5,15.6,15.2,15.6,15.1,15.8,17,17.4,16.8,16.4,16.4]
},                    
{
label: "hemoglobin_3",
fillColor: "transparent",
strokeColor: "#de4760",
pointColor: "#de4760",
pointHighlightStroke: "#FFF",
data: [null,37.1,37,37.2,37.6,36.9,37.6,36.8,37.6,38,37.5,39.1,37.5]
},
{
label: "hemoglobin_4",
fillColor: "transparent",
strokeColor: "#fdcf7e",
pointColor: "#fdcf7e",                          
pointHighlightStroke: "#FFF",
data: [null,29.9,30.4,29.5,29.6,30.2,29.4,29.8,26.9,27,28.5,26.8,28.5]
},                                        
{
label: "hemoglobin_5",
fillColor: "transparent",
strokeColor: "#a33a59",
pointColor: "#a33a59",
pointHighlightStroke: "#FFF",
data: [null,11.8,11.4,11.9,11.9,11.5,12.2,11.7,11.8,10.9,10.7,11.3,11.3]
}
]
};
var options = {
responsive: true,
scaleOverride: true,
scaleSteps: 10,
scaleStepWidth: 5,
scaleStartValue: 0,
showTooltips: false,
pointDot: true,
pointDotRadius : 6,
datasetStrokeWidth : 3,
bezierCurve : false,
scaleShowHorizontalLines: false,
scaleGridLineWidth : 2,
scaleGridLineColor : "#EEEEEE",
scaleLineWidth: 3,
scaleLineColor: "#000000",
scaleFontFamily: '"Gotham Book",sans-serif',
scaleFontSize: 18,
onAnimationProgress: function() { drawDatasetPointsLabels() },
onAnimationComplete: function() { drawDatasetPointsLabels() }                    
}
var ctx = $("#myChart").get(0).getContext("2d");
var Trends = new Chart(ctx).Line(data, options);            
function drawDatasetPointsLabels() {
ctx.font = '.9rem "Gotham Book",sans-serif';
ctx.fillStyle = '#AAA';
ctx.textAlign="center";
$(Trends.datasets).each(function(idx,dataset){
//First dataset is shifted off the scale line. 
//Don't write to the canvas for the null placeholder.
$(dataset.points).each(function(pdx,pointinfo){
if ( pointinfo.value !== null ) {
ctx.fillText(pointinfo.value,pointinfo.x,pointinfo.y - 15);
}
});
});         
}

Est ici l'original de la problématique de la version sur jsfiddle: http://jsfiddle.net/s9eannLh

[Mise à jour du lien]
Et voici la solution mise à jour sur jsfiddle: https://jsfiddle.net/s9eannLh/82/

Merci à tous!

J'ai le même problème, mais votre lien de démo ne semble pas travailler
J'ai trouvé, j'ai dû passer le Trends et ctx objets comme arguments lors de la enveloppé dans $(document).ready(); Est que ce que vous faites? MODIFIER" Par exemple:

var options = {                              onAnimationProgress: function() { drawDatasetPointsLabels(Trends, ctx) },                              onAnimationComplete: function() { drawDatasetPointsLabels(Trends, ctx) }  }      function drawDatasetPointsLabels(Trends, ctx) {        // do stuff here...     }

OriginalL'auteur JBMcClure

Voici comment le faire en s'appuyant sur l'exemple fourni sur github. Il ressemble à votre solution...

//Define a plugin to provide data labels
Chart.plugins.register({
afterDatasetsDraw: function(chart, easing) {
//To only draw at the end of animation, check for easing === 1
var ctx = chart.ctx;
chart.data.datasets.forEach(function (dataset, i) {
var meta = chart.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);
});
}
});
}
});

De Code:
https://github.com/chartjs/Chart.js/blob/master/samples/advanced/data-labelling.html

Exemple:
http://www.chartjs.org/samples/latest/advanced/data-labelling.html

Vous pouvez également définir des plugins en ligne pour la carte au lieu de à l'échelle mondiale...

var chart = new Chart(ctx, {
plugins: [{
afterDatasetsDraw: ...
}]
});

OriginalL'auteur Cal

-1

Code mis à jour pour @JBMcClure solution:

        var data = {
labels: ["","Jun 2013","Jul 2013","Aug 2013","Sep 2013","Oct 2013","Nov 2013","Dec 2013","Jan 2014","Feb 2014","Mar 2014","Apr 2014","May 2014"],
datasets: [
{
label: "hemoglobin_1",
fillColor: "transparent",
strokeColor: "#65204c",
pointColor: "#65204c",
pointHighlightStroke: "#FFF",
data: [null,5.7,5.7,5.8,5.7,5.8,5.7,5.9,6.7,6.7,6.5,6.4,6.4]
},
{
label: "hemoglobin_2",
fillColor: "transparent",
strokeColor: "#ed7141",
pointColor: "#ed7141",
pointHighlightStroke: "#FFF",
data: [null,15.5,15.5,15.6,15.2,15.6,15.1,15.8,17,17.4,16.8,16.4,16.4]
},
{
label: "hemoglobin_3",
fillColor: "transparent",
strokeColor: "#de4760",
pointColor: "#de4760",
pointHighlightStroke: "#FFF",
data: [null,37.1,37,37.2,37.6,36.9,37.6,36.8,37.6,38,37.5,39.1,37.5]
},
{
label: "hemoglobin_4",
fillColor: "transparent",
strokeColor: "#fdcf7e",
pointColor: "#fdcf7e",
pointHighlightStroke: "#FFF",
data: [null,29.9,30.4,29.5,29.6,30.2,29.4,29.8,26.9,27,28.5,26.8,28.5]
},
{
label: "hemoglobin_5",
fillColor: "transparent",
strokeColor: "#a33a59",
pointColor: "#a33a59",
pointHighlightStroke: "#FFF",
data: [null,11.8,11.4,11.9,11.9,11.5,12.2,11.7,11.8,10.9,10.7,11.3,11.3]
}
]
};
var options = {
type: 'line',
data: data,
options: {
responsive: true,
scaleOverride: true,
scaleSteps: 10,
scaleStepWidth: 5,
scaleStartValue: 0,
showTooltips: false,
pointDot: true,
pointDotRadius : 6,
datasetStrokeWidth : 3,
bezierCurve : false,
scaleShowHorizontalLines: false,
scaleGridLineWidth : 2,
scaleGridLineColor : "#EEEEEE",
scaleLineWidth: 3,
scaleLineColor: "#000000",
scaleFontFamily: '"Gotham Book",sans-serif',
scaleFontSize: 18,
onAnimationProgress: function() { drawDatasetPointsLabels() },
onAnimationComplete: function() { drawDatasetPointsLabels() }
}
};
var ctx = document.getElementById('myChart').getContext('2d');
var Trends = new Chart(ctx, options);
function drawDatasetPointsLabels() {
ctx.font = '.9rem "Gotham Book",sans-serif';
ctx.fontWeight = 'bold';
ctx.fillStyle = '#AAA';
ctx.textAlign="center";
$(Trends.datasets).each(function(idx,dataset){
$(dataset.points).each(function(pdx,pointinfo){
if ( pointinfo.value !== null ) {
ctx.fillText(pointinfo.value,pointinfo.x,pointinfo.y - 15);
}
});
});
}

@JBMcClure Ici est une mise à jour du lien de travail:

https://jsfiddle.net/s9eannLh/177/

OriginalL'auteur roni_eliav

Vous devez vous connecter pour publier un commentaire.