Question

我正在探索C3.js并一直用它来构建基本图表。我已经基于C3网站提供的模板构建了一个简单的条形图，并对其进行了修改，以根据值显示不同的颜色。

以下是JS代码：

var chart = c3.generate({
data: {
    columns: [
        ['data1', 30, 20, 50, 40, 60, 50],
    ],
    type: 'bar',
    colors: {
        data1: '#0000ff'
    },
    color: function(color, d) {
        return d.value < 25 ? '#ff0000' : color
    }
}
});

代码运行正常，条形图按预期呈现。

当我检查HTML时，我看到生成的没有ID属性的SVG标记（实质上是条形图）。

想知道是否有任何方法可以设置和访问生成的SVG标记的ID属性。

提前致谢！

Answer 1

您可以使用 c3.js oninit 功能使用 d3.js attr 回调：

var chart = c3.generate({
    oninit: function() {
        this.svg.attr('id', 'your_id')
    },
    ...

如何将ID属性设置为使用C3.js创建的SVG元素？

1 个答案: