javascript - ChartJS-Color diferente por punto de datos

angularjs linechart

Question

¿Hay alguna manera de establecer un color diferente para un punto de datos en un Gráfico de líneas si está por encima de un cierto valor?

Encontré este ejemplo para dxChart - https://stackoverflow.com/a/24928967/949195 - y ahora busco algo similar para ChartJS

Answer 1

Al actualizar a la versión 2.2.2 de ChartJS, descubrí que la respuesta aceptada ya no funciona. Los conjuntos de datos tomarán una matriz con información de estilo para las propiedades. En este caso:

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();

Encontré esto mirando a través de las muestras de ChartJS, específicamente esta: "Ejemplo de tamaños de puntos diferentes"

Answer 2

Esto es lo que funcionó para mí (v 2.7.0), primero tuve que establecer pointBackgroundColor y pointBorderColor en el conjunto de datos en una matriz (puede llenar esta matriz con colores en primer lugar si lo desea):

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

Entonces puedes simular con los colores de los puntos directamente:

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

Algunas otras propiedades con las que jugar para distinguir un punto: pointStrokeColor (aparentemente existe pero parece que no puedo hacer que funcione), pointRadius y pointHoverRadius (enteros), pointStyle (''triángulo'', ''rect'', ''rectRot'', ''cross'', ''crossRot'', ''star'', ''line'' y ''dash''), aunque parece que no puedo entender los valores predeterminados para pointRadius y pointStyle.

Answer 3

Si inicializa myChart de esta manera,

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

tienes que cambiar el color de la línea por este código

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

Si inicializa myChart de esta manera,

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

tienes que cambiar el color de la línea por este código

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

Answer 4

Solo agrego lo que funcionó para mí en la nueva versión 2.0.

En lugar de:

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

Tuve que usar:

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

No estoy seguro si eso se debe a un cambio en 2.0 o porque estoy usando un gráfico de barras y no un gráfico de líneas.

Answer 5

Para chartjs 2.0, vea la siguiente respuesta.

Respuesta original a continuación.

Buena pregunta sobre ChartJS. He estado queriendo hacer algo similar. es decir, cambiar dinámicamente el color del punto a un color diferente. ¿Has probado esto a continuación? Lo intenté y funcionó para mí.

Prueba esto:

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

O prueba esto:

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

O incluso esto:

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

Entonces haz esto:

myLineChart.update();

Supongo que podrías tener algo como;

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

Pruébalo de todos modos.