Как изменить цвет графика. js точек в зависимости от метки - PullRequest
Новая
       76

Как изменить цвет графика. js точек в зависимости от метки

0 голосов
/ 31 января 2020

У меня есть линейный график. js график, где метками являются дни недели. Я хотел бы изменить точечный фон в зависимости от того, какой сегодня день (понедельник - воскресенье). Я могу изменить цвет фона в зависимости от значений данных, но это не то, что мне нужно. Вместо этого я хочу, чтобы каждый день (метка) давал разные цветовые точки.

enter image description here

Например, так я могу менять точки в зависимости от значения данных (не то, что мне нужно) 

chartData: {
    labels: ['Monday', 'Tuesday', 'Wednesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],

    datasets: [{
        data: [57, 569, 12, 78, 569, 0, 5],
        fill: true,
        pointRadius: 4,
        pointBackgroundColor: function(context) {
            var index = context.dataIndex
            var value = context.dataset.data[index]
            return value > 100 ? 'green' : 'red'
        }
    }]
},

Но когда я попытался применить это к меткам, я получил ошибку:

TypeError: Невозможно прочитать свойство '0' неопределенного в pointBackgroundColor 

chartData: {
    labels: ['Monday', 'Tuesday', 'Wednesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],

    datasets: [{
        data: [57, 569, 12, 78, 569, 0, 5],
        fill: true,
        pointRadius: 4,
        pointBackgroundColor: function(context) {
            var index = context.dataIndex;
            var value = context.labels[index];

            if (value == 'Monday') return 'green'
            if (value == 'Tuesday') return 'red'
            if (value == 'Wednesday') return 'blue'
        }
    }]
},

1 Ответ

3 голосов
/ 31 января 2020

Вы можете задать массив цветов свойству pointBackgroundColor: 

var ctx = document.getElementById('lineChart').getContext('2d');

var colors = ["rgba(255,0,0,1)", "rgba(0,255,0,1)", "rgba(0,0,255,1)", "rgba(255,0,0,1)", "rgba(0,255,0,1)"];
var colors1 = Object.assign([], colors);
colors1.sort();
var data = {
  labels: [
    "1 ",
    "2 ",
    "3 ",
    "4 ",
    "5 ",
  ],
  datasets: [{
    label: "line 1",
    strokeColor: "rgba(151,187,205,1)",
    pointRadius: 5,
    pointBackgroundColor: colors,
    fill: false,
    data: [
      0.33771896,
      0.903282737,
      0.663260514,
      0.841077343,
      0.172840693,

    ],
  }, {
    label: "Average",
    strokeColor: "rgba(245, 15, 15, 0.5)",
    pointBackgroundColor: colors1,
    pointRadius: 5,
    fill: false,
    data: [0.70934844,
      0.562981612,
      0.496916323,
      0.410302488,
      0.55354621
    ]
  }]
};

var options = {
  datasetFill: false,
}
var myChart = new Chart(document.getElementById("lineChart"), {
  type: 'line',
  data,
  options
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<div>
  <canvas id="lineChart" width="600" height="200"></canvas>
</div>
...