web-dev-qa-db-fra.com

Chart.js Line-Chart avec différentes étiquettes pour chaque ensemble de données

En utilisant Chart.js vous pouvez créer des graphiques linéaires et pour cela vous devez utiliser des étiquettes et des jeux de données. par exemple:

var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            fill: false,
            lineTension: 0.1,
            backgroundColor: "rgba(75,192,192,0.4)",
            borderColor: "rgba(75,192,192,1)",
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            pointBorderColor: "rgba(75,192,192,1)",
            pointBackgroundColor: "#fff",
            pointBorderWidth: 1,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: "rgba(75,192,192,1)",
            pointHoverBorderColor: "rgba(220,220,220,1)",
            pointHoverBorderWidth: 2,
            pointRadius: 1,
            pointHitRadius: 10,
            data: [65, 59, 80, 81, 56, 55, 40],
        }
    ]
};

Le problème ici est que vous avez un nombre fixe d'étiquettes (7 dans ce cas) et vous devez également fournir 7 entrées de données pour chaque ensemble de données. Et maintenant, si vous avez un nombre inconnu d'étiquettes et de saisies de données?

Que faire si une entrée de données contient un nombre et une heure:

Entry {
    number: 127
    time: 10:00
}

Et si vous voulez afficher toutes les heures sur l'axe X et tous les nombres sur l'axe Y triés par heure sur l'axe X. Est-ce possible avec Chart.js?

javascriptchartschart.js
14
Mulgard

J'ai eu une bataille avec cela aujourd'hui aussi. Vous devez être un peu plus précis avec votre jeu de données. Dans un graphique en courbes, les "ensembles de données" sont un tableau dont chaque élément du tableau représente une ligne sur votre graphique. Chart.js est vraiment très flexible ici une fois que vous l'avez réglé. Vous pouvez lier une ligne (un élément de jeu de données) à un axe x et/ou un axe y, chacun d'eux que vous pouvez spécifier en détail.

Dans votre cas, si nous nous en tenons à une seule ligne sur le graphique et que vous souhaitez que la partie "heure" de l'entrée soit en bas (l'axe des x), alors toutes vos heures pourraient aller dans le tableau "étiquettes" et votre " nombre "serait pointé sur l'axe des y. Pour rester simple sans spécifier nos propres échelles avec les axes x et y et compte tenu de ces données:

var MyData = [{time:"10:00", number: "127"},
              {time:"11:00", number: "140"},
              {time:"12:00", number: "135"},
              {time:"13:00", number: "122"}];

Vous pouvez configurer la propriété "data" de votre graphique pour qu'elle soit:

var data = {
    labels: ["10:00", "11:00", "12:00", "13:00"],
    datasets: [
        {
            label: "My First dataset",

            // Insert styling, colors etc here

            data: [{x: "10:00", y: 127},
                   {x: "11:00", y: 140},
                   {x: "12:00", y: 135},
                   {x: "13:00", y: 122}]
        }
    ]};

Notez que le tableau de données est maintenant un peu plus spécifique avec chaque élément de données se traçant sur l'axe des x en référençant l'une des étiquettes plutôt que d'être simplement un nombre brut. Vous pouvez maintenant mettre un autre objet d'ensemble de données dans le tableau d'ensembles de données en suivant ce modèle et avoir deux lignes, évidemment donner à vos lignes des couleurs et des noms différents ("étiquette").

J'espère que cela t'aides.

15
DamienB

J'ai trouvé une très bonne solution ici: https://github.com/chartjs/Chart.js/issues/395

Fondamentalement, vous pouvez ajouter votre propre propriété 'labels' à chaque jeu de données et en tirer parti dans les rappels pour les étiquettes xAxes, les info-bulles ou tout ce que vous voulez.

var ctx = $("#myChart");
var myChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        datasets: [{
            data: [1, 2, 3, 4, 5],
            backgroundColor: [
                'green',
                'yellow',
                'red',
                'purple',
                'blue',
            ],
            labels: [
                'green',
                'yellow',
                'red',
                'purple',
                'blue',
            ]
        }, {
            data: [6, 7, 8],
            backgroundColor: [
                'black',
                'grey',
                'lightgrey'
            ],
            labels: [
                'black',
                'grey',
                'lightgrey'
            ],
        },]
    },
    options: {
        responsive: true,
        legend: {
            display: false,
        },
        tooltips: {
            callbacks: {
                label: function(tooltipItem, data) {
                    var dataset = data.datasets[tooltipItem.datasetIndex];
                    var index = tooltipItem.index;
                    return dataset.labels[index] + ': ' + dataset.data[index];
                }
            }
        }
    }
});

Ce qui est important ici, c'est cette pièce:

        tooltips: {
            callbacks: {
                label: function(tooltipItem, data) {
                    var dataset = data.datasets[tooltipItem.datasetIndex];
                    var index = tooltipItem.index;
                    return dataset.labels[index] + ': ' + dataset.data[index];
                }
            }
        }
4
devaent

Puisqu'il y a un certain nombre de questions dans votre message, je vais essayer de vous aider avec au moins certaines d'entre elles. Dans le cas de votre modèle d'entrée avec un nombre et une heure, vous devez créer un graphique dispersé. Ici, vous définissez des objets de données avec des valeurs x et y comme indiqué dans mon exemple ci-dessous. Il faut que chaque entrée x ait un y correspondant. Jetez un œil au diagramme de dispersion. http://www.chartjs.org/docs/#line-chart-scatter-line-charts

var d = new Date();
var scatterChart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            label: 'Scatter Dataset',
            data: [{
                x: new Date().setDate(d.getDate()-5),
                y: 0
            }, {
                x: new Date(),
                y: 10
            }, {
                x: new Date().setDate(d.getDate()5),
                y: 5
            }]
        }]
    },
    options: {
        scales: {
            xAxes: [{
                    type: "time",
                    time: {
                        format: "HH:mm",
                        unit: 'hour',
                        unitStepSize: 2,
                        displayFormats: {
                            'minute': 'HH:mm', 
                            'hour': 'HH:mm'
                        },
                        tooltipFormat: 'HH:mm'
                    },
                    gridLines: {
                        display: false
                    }
                }],
        }
    }
});
3
SJFJ