ChartJS-разные цвета для каждой точки данных

есть ли способ установить другой цвет для точки данных в линейном графике, если его выше определенного значения?

Я нашел этот пример для dxChart -https://stackoverflow.com/a/24928967/949195 - и теперь ищет что-то подобное для ChartJS

11
angularjs chart.js javascript linechart

5 ответов

хороший вопрос относительно ChartJS. Я хотел сделать то же самое. Я. e динамическое изменение цвета точки На другой цвет. Вы пробовали это ниже. Я просто попробовал, и у меня получилось.

попробуйте это:

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

или попробуйте этот:

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

или даже так:

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

тогда делаем так:

myLineChart.update();

Я думаю, вы могли бы иметь что-то вроде:

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

дать ему попробовать в любом случае.

8

при обновлении до версии 2.2.2 ChartJS я обнаружил, что принятый ответ больше не работает. Наборы данных будут принимать массив, содержащий информацию о стилизации для свойств. В этом случае:

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

Я нашел это, просматривая образцы для ChartJS, в частности этот: "Пример Разных Размеров Точек"

19

вот что сработало для меня (v 2.7.0), сначала я должен был установить pointBackgroundColor и pointBorderColor в наборе данных в массив (вы можете заполнить этот массив цветами в первую очередь, если хотите):

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

тогда вы можете обезьяна с цветами точек непосредственно:

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

некоторые другие свойства для игры, чтобы отличить точку: pointStrokeColor (он, по-видимому, существует, но я не могу заставить его работать), pointRadius & pointHoverRadius (целые числа), pointStyle ("треугольник", "rect", "rectRot", "cross", "crossRot", "star", "line" и "dash"), хотя я не могу понять значения по умолчанию для pointRadius и pointStyle.

5

просто добавляя то, что сработало для меня в новой версии 2.0.

вместо:

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

мне пришлось использовать:

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

не уверен, что это из-за изменения 2.0 или потому, что я использую гистограмму, а не линейчатую диаграмму.

1

если вы инициализируете myChart таким образом,

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

вы должны изменить цвет линии этим кодом

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

если вы инициализируете myChart таким образом,

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

вы должны изменить цвет линии этим кодом

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