javascript - 如何更改 billboard.js 中的线条颜色

Question

我是 billboard.js 的新手，试图做一件非常简单的事情:改变线条的颜色。

var chart = bb.generate({
  data: {
    columns: [
    ["data1", 30, 20, 50, 40, 60, 50],
    ["data2", 200, 130, 90, 240, 130, 220]
    ],
    type: "line",
    bindto: "#dataColor"
});

chart.data.colors({data1:'orange'});

在此示例中，我可以将 data1 的颜色更改为橙​​色，但 data1 不是变量，我想要这样的东西:

var lab1="toto",lab2="titi";
var chart = bb.generate({
  data: {
    columns: [
    [lab1, 30, 20, 50, 40, 60, 50],
    [lab2, 200, 130, 90, 240, 130, 220]
    ],
    type: "line",
    bindto: "#dataColor"
});

chart.data.colors({lab1:'orange'});

但这不起作用，我必须硬编码 lab1 的值:chart.data.colors({toto:'orange'})

Answer 1

尝试将它括在方括号内。这应该将其替换为 lab1 的字符串值。

chart.data.colors({[lab1]:'orange'});

来自 MDN

Starting with ECMAScript 2015, the object initializer syntax also supports computed property names. That allows you to put an expression in brackets [], that will be computed and used as the property name.

如果你没有使用 ES2015，你总是可以这样做

var d = {};
d[lab1] = 'orange';
chart.data.colors(d);