Chart.js Ligne Graphique avec des Étiquettes différentes pour chaque jeu de données

À l'aide de Chart.js vous pouvez créer des graphiques en courbes, et pour cela vous devez privde des étiquettes et des ensembles 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 montant fixe d'étiquettes (7 dans ce cas) et que vous devez également fournir des 7 entrées de données pour chaque jeu de données. Maintenant, si vous avez une quantité inconnue d'étiquettes et d'entrées de données?

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

Entry {
    number: 127
    time: 10:00
}

Que si vous voulez afficher tous les temps sur l'Axe des X et tous les Nombres sur l'Axe des Y triés par le temps sur l'Axe des abscisses. Est-ce possible avec Chart.js?

Avez-vous trouvé la solution?
Non, Monsieur, pas encore.
Toujours rien? Il semble que nous manque quelque chose ici, il s'agit d'un cas d'utilisation.

OriginalL'auteur Mulgard | 2016-06-29

6

J'ai eu une bataille avec cela aujourd'hui.
Vous avez besoin d'obtenir un peu plus précis avec votre jeu de données. Dans un graphique en ligne "jeux de données" est un tableau avec chaque élément de la matrice représentant une ligne sur votre graphique. Chart.js est vraiment souple ici une fois que vous travaillez. Vous pouvez lier une ligne (un jeu de données de l'élément) pour l'axe x et/ou un axe y, chacun de qui 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 le "temps" de l'entrée sur le fond (l'axe des x), alors tous vos moments pourraient aller dans les "étiquettes" array et votre "numéro" serait pin-pointu sur l'axe des ordonnées. Pour rester simple, sans préciser nos propres échelles avec les axes x et y et compte tenu des 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 pourriez mettre en place les "données" de la propriété de votre graphique:
```
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}]
        }
    ]};
```
Noter que le tableau de données est maintenant un peu plus spécifique à chaque élément de traçage des données sur l'axe des x par la référence à l'une des étiquettes plutôt que d'être simplement un nombre brut. Vous pouvez maintenant mettre un autre objet dataset dans les ensembles de données tableau suivant ce modèle et de deux lignes, évidemment donner à vos lignes de couleurs différentes et des noms ("label").

Espère que cette aide.

Je pense qu'il y a quelques crochets là où il devrait y avoir des accolades. [x: "10:00", y: 127] n'est pas valide js

OriginalL'auteur DamienB

Puisqu'il y a un certain nombre de questions dans ton post, je vais essayer de les aider avec au moins certains d'entre eux. Dans le cas de votre modèle d'Entrée de gamme avec un numéro et une fois que vous devez créer une dispersion du graphique. Vous définissez ici les objets de données avec les valeurs x et y, comme indiqué dans mon exemple ci-dessous. Elle exige que chaque entrée x est un y correspondant.
Regardez le graphique en nuage de points.
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
                    }
                }],
        }
    }
});

veuillez donner une explication de la façon dont cela répond à la question
Vérifier la ventilation-ligne-cartes lien fourni dans la réponse.
cette réponse est similaire à la section "utilisation de google", le type de réponses. Il ne répond à la question.
Ne pas répondre à la question
Cette réponse complètement répondu à ma question de savoir comment ajouter des jeux de données avec des labels indépendants. Il suffit de lire le code et de répondre à vous coup de poing dans le visage.

OriginalL'auteur SJFJ

Vous devez vous connecter pour publier un commentaire.