温馨提示:本文翻译自stackoverflow.com,查看原文请点击:javascript - How to change the color of Chart.js points depending on the label
javascript charts chart.js linechart

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

发布于 2020-03-28 23:37:42

我有一个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:无法读取pointBackgroundColor处未定义的属性“ 0”

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'
        }
    }]
},

查看更多

查看更多

提问者
Liga
被浏览
47
Alonas 2020-01-31 18:43

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