如何根据标签更改 Chart.js 点的颜色 [英] How to change the color of Chart.js points depending on the label

问题描述

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

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

chartData: {标签:['星期一'，'星期二'，'星期三'，'星期三'，'星期四'，'星期五'，'星期六'，'星期日']，数据集:[{数据:[57, 569, 12, 78, 569, 0, 5],填写:真实，点半径:4，点背景颜色:函数(上下文){var index = context.dataIndexvar value = context.dataset.data[索引]返回值>100 ?绿色":红色"}}]},

但是当我尝试将其应用于标签时，出现错误:

<块引用>

TypeError: 无法读取 pointBackgroundColor 处未定义的属性0"

chartData: {标签:['星期一'，'星期二'，'星期三'，'星期三'，'星期四'，'星期五'，'星期六'，'星期日']，数据集:[{数据:[57, 569, 12, 78, 569, 0, 5],填写:真实，点半径:4，点背景颜色:函数(上下文){var index = context.dataIndex;var value = context.labels[索引];if (value == 'Monday') 返回'绿色'if (value == 'Tuesday') 返回'红色'if (value == 'Wednesday') 返回'蓝色'}}]},

解决方案

你可以给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);颜色1.sort();变量数据 = {标签: ["1","2","3","4","5",],数据集:[{标签:第 1 行"，strokeColor: "rgba(151,187,205,1)",点半径:5，点背景颜色:颜色，填充:假，数据: [0.33771896,0.903282737,0.663260514,0.841077343,0.172840693,],}, {标签:平均"，strokeColor: "rgba(245, 15, 15, 0.5)",点背景颜色:颜色1，点半径:5，填充:假，数据:[0.70934844，0.562981612,0.496916323,0.410302488,0.55354621]}]};变量选项 = {数据集填充:假，}var myChart = new Chart(document.getElementById("lineChart"), {类型:'线'，数据，选项})

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></脚本>
<canvas id="lineChart" width="600" height="200"></canvas></div>

I have a line Chart.js chart where the labels are the days of week. I would like to change the point background depending on what day it is (Monday - Sunday). I am able to change the background color depending on the data values but that's not what I need. Instead, I want to give each day (label) a different color point.

For example, this is how I can change the points depending on the data values (not what I need)

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

But when I tried to apply this to labels, I got an error:

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

解决方案

You can give an array of colors to pointBackgroundColor property:

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>

这篇关于如何根据标签更改 Chart.js 点的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！