时间戳

首页 > 解决方案 > chartJS 中基于数组条目的动态颜色

javascript - chartJS 中基于数组条目的动态颜色

问题描述

我在尝试根据 JSON 响应为我的条形图动态着色时遇到问题。

我知道这已经被问过很多次了，但是我找到的或试图解决的所有答案都没有让我更接近解决方案。

我创建了一个快速的JSfiddle来显示这个问题。

我有许多其他图表都是从不同的 JSON 字符串生成的，所以已经减少了很多以尝试隔离问题。我对其他图表没有相同的问题，因为标签数组中的条目数与颜色数一致。有问题的代码是这样的；

DT_Labels.forEach(function(DT_LABELS, x) {
data.datasets.push({
    label: DT_LABELS,
    backgroundColor: backgroundColor[x],
    data: JSON.parse(DT_Values[x]).map(Number)
            });
            });

DT_Labels 仅包含一个条目，因为图表是一个汇总列表 - 理论上，如果我计算 DT_Values 的数量，这将起作用，但如果我这样做，我无法在图表中获得正确的数据。

有什么想法可以重新格式化它以根据值而不是标签的数量生成颜色计数器吗？

标签： javascriptchart.js

解决方案

改变：

backgroundColor: backgroundColor[x],

至：

backgroundColor: backgroundColor,

结果：

代码更改结果

为什么这行得通？

backgroundColor可以通过多种方式指定属性。通常它被设置为一个字符串，例如，#abcdef但它也可以被设置为一个数组。在这种情况下，Chart.js 本身将根据它正在绘制的数据点的索引从数组中选择颜色。

推荐阅读