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

标签 javascript charts chart.js linechart

我有一个 Chart.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: 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'
        }
    }]
},

最佳答案

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

关于javascript - 如何根据标签更改 Chart.js 点的颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60001579/

相关文章:

javascript - 警告 : Can't call setState (or forceUpdate) on an unmounted component in React Native

JavaScript——使用特殊字符对对象进行编码

javascript - 是否有可能重构并完全避免许多 if else if else 语句以获得更好的可读性

javascript - Google 图表 - 使用可变参数绘制图表

javascript - 使用多个 x/y 网格动态更新 Chart.JS 中的散点图/折线图

javascript - 如何将 HTML 表格转换为图表?

javascript - 尝试在 extjs 饼图图例文本中显示 htmltag 字符串

javascript - 如何从 navaigater 栏的 Highstock 图表中删除时间?

javascript - Chartjs 工具提示换行符

javascript - Chart.js 分隔线