如何在chartjs javascript中设置相同的borderColor和backgroundColor

Question

我已经使用chartjs实现了折线图，每次加载图表时，都会生成随机颜色，但是如何为backgroundColor and borderColor

设置相同的颜色

数据集看起来像，

var data = [{
      label: "records",
      data: [2, 4 ,20,10],
      fill: false,
      backgroundColor: this.generateColor(),
      borderColor: this.generateColor(),
      borderWidth: 1
    },{
      label: "amount",
      data: [100, 200, 500,50],
      fill: false,
      backgroundColor: this.generateColor(),
      borderColor: this.generateColor(),
      borderWidth: 1
    }

}]
  generateColor = () => {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++) {
      color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
  }

预期：borderColor和backgroundColor应该相同

Answer 1

最简单的方法是将生成的颜色保存到每个对象都可以引用的变量中（映射时为示例）。>>

但是如果由于某些原因您不想这样做，那么可以创建一个对象工厂函数：

const buildObj = obj => {
    const color = generateColor();
    const o = { ...obj, backgroundColor: color, borderColor: color };
    return o;
}

然后调用它来生成新对象：

const mappedData = data.map(o => buildObj(o))

现在每个对象将具有唯一的颜色，但是每个对象的backgroundColor和borderColor将相同。

Answer 2

您只需要声明一个全局变量并多次使用它。

Answer 3

所以问题是，每次调用该函数时，您都会获得随机颜色。尝试为数组中的每个元素生成一次颜色。一个简单的想法是：

Answer 4

所以边框颜色和背景颜色不匹配的原因是因为您在需要颜色的每个属性中调用该函数。仅函数本身就没有任何状态，因此函数本身无法记住函数先前返回的内容。