web-dev-qa-db-fra.com

ChartJS - Couleur différente par point de données

Existe-t-il un moyen de définir une couleur différente pour un point de donnée dans un graphique en courbes si sa valeur est supérieure à une certaine valeur?

J'ai trouvé cet exemple pour dxChart - https://stackoverflow.com/a/24928967/949195 - et cherche maintenant quelque chose de similaire pour ChartJS

javascriptangularjslinechartchart.js
13
Xander

Pour chartjs 2.0 voir la réponse suivante.

Réponse originale ci-dessous.

Bonne question concernant ChartJS. J'ai eu envie de faire la même chose. c'est-à-dire changer dynamiquement la couleur du point en une couleur différente. Avez-vous essayé ceci ci-dessous. Je viens d'essayer et cela a fonctionné pour moi.

Essaye ça:

myLineChart.datasets[0].points[4].fillColor =   "rgba(000,111,111,55)" ;

Ou essayez ceci:

myLineChart.datasets[0].points[4].fillColor =  "#FF0000";

Ou même ceci:

myLineChart.datasets[0].points[4].fillColor =  "lightgreen";

Alors fais ceci:

myLineChart.update();

Je suppose que vous pourriez avoir quelque chose comme;

if (myLineChart.datasets[0].points[4].value > 100) {
    myLineChart.datasets[0].points[4].fillColor =  "lightgreen";
    myLineChart.update();
 }

Essayez quand même.

8
007

Lors de la mise à jour vers la version 2.2.2 de ChartJS, j’ai constaté que la réponse acceptée ne fonctionnait plus. Les ensembles de données prendront un tableau contenant des informations de style pour les propriétés . Dans ce cas:

var pointBackgroundColors = [];
var myChart = new Chart($('#myChart').get(0).getContext('2d'), {
    type: 'line',
    data: {
        datasets: [
            {
                data: dataPoints,
                pointBackgroundColor: pointBackgroundColors
            }
        ]
    }
});

for (i = 0; i < myChart.data.datasets[0].data.length; i++) {
    if (myChart.data.datasets[0].data[i] > 100) {
        pointBackgroundColors.Push("#90cd8a");
    } else {
        pointBackgroundColors.Push("#f58368");
    }
}

myChart.update();

J'ai trouvé ceci en parcourant les exemples de ChartJS, en particulier celui-ci: "Exemple de tailles de points différentes"

27
JIntro

Voici ce qui a fonctionné pour moi (v 2.7.0). Tout d'abord, je devais définir pointBackgroundColor et pointBorderColor dans l'ensemble de données sur un tableau (vous pouvez remplir ce tableau avec des couleurs si vous le souhaitez):

var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [
            {
                data: dataPoints,
                pointBackgroundColor: [],
                pointBorderColor: [],
            }
        ]
    }
});

Ensuite, vous pouvez directement avec les couleurs des points:

  myChart.data.datasets[0].pointBackgroundColor[4] = "#cc00cc";
  myChart.data.datasets[0].pointBorderColor[4] = "#cc0000";
  myChart.update();

Quelques autres propriétés à jouer pour distinguer un point: pointStrokeColor (il existe apparemment mais je n'arrive pas à le faire fonctionner), pointRadius & pointHoverRadius (entiers), pointStyle ('triangle', 'rect', 'rectRot', 'cross', 'crossRot', 'star', 'line' et 'dash'), bien que je n'arrive pas à comprendre les valeurs par défaut de pointRadius et pointStyle.

7
braks

Ajoutez simplement ce qui a fonctionné pour moi dans la nouvelle version 2.0.

Au lieu de:

myLineChart.datasets[0].points[4].fillColor =  "lightgreen";

Je devais utiliser:

myChart.config.data.datasets[0].backgroundColor[4] = "lightgreen";

Je ne sais pas si c'est à cause d'un changement dans la version 2.0 ou parce que j'utilise un graphique à barres et non un graphique à courbes.

1
NickA

Si vous initialisez myChart de cette manière,

var myChart = new Chart(ctx, {
  type: 'line',
  data: {

vous devez changer la couleur de la ligne avec ce code

  myChart.data.datasets[0].backgroundColor[0] ="#87CEFA";

Si vous initialisez myChart de cette manière,

myBar = new Chart(ctx).Line(barChartData, {

vous devez changer la couleur de la ligne avec ce code

myLineChart.datasets[0].points[4].fillColor =  "#FF0000";
0
user3200692