javascript - 如何根据标签更改 Chart.js 点的颜色

Question

我有一个 Chart.js 折线图，其中标签是星期几。我想根据具体日期(周一至周日)更改点背景。我可以根据数据值更改背景颜色，但这不是我需要的。相反，我想给每一天(标签)一个不同的色点。

例如，这就是我如何根据数据值更改点(不是我需要的)

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: Cannot read property '0' of undefined at 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'
        }
    }]
},

Answer 1

您可以为 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>