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

Ответ 1

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

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

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

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

Ответ 2

При обновлении до версии 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, в частности, это: "Различные варианты размеров точек"

Ответ 3

Здесь то, что сработало для меня (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.

Ответ 4

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

Вместо:

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

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

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

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

Ответ 5

Если вы инициализируете 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";