C3.js - 改变折线图中圆圈的颜色

Question

我正在使用 C3.js 构建折线图。在此图中，我必须根据颜色数组更改圆圈颜色。

c3的代码如下：

var chart = c3.generate({
        bindto:'#timeline',
        colors:['red', 'blue','green','yellow','green','red'],
        data: {
            x: 'x',
            columns: [
                ['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06'],
                ['data1', 10, 15, 12, 5, 9, 11],
                ['data2', 15, 12, 10, 8, 4, 12],
            ]
        },
        axis: {
            x: {
                type: 'timeseries',
                tick: {
                    format: '%Y-%m-%d'
                },
                label: {
                    text: 'Dates',
                    position: 'outer-middle'
                }
            },
            y: {
                show:true,
                label: {
                    text: 'Count',
                    position: 'outer-middle'
                }
            }
        }
    });

对于每个数据点，我想用 colors 数组中的相应颜色填充它。我必须使用 CSS，但我不确定如何在 generate 函数中使用它。

Answer 1

经过几次尝试，我发现了如何去做。

数组 colors 不应在 generate 函数内。如下所示在 generate 函数之外声明它，然后使用 c3 的 color 属性为每个点分配颜色，如下所示。

    var colors = ['red','green','blue','yellow','black','red'];
var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30, 200, 100, 150, 150, 250],
        ],
        type: 'line',
        color:function(color,d){
                return colors[d.index];    
        }
    },
});

其工作原理如 this fiddle.

所示

C3.js - 改变折线图中圆圈的颜色

C3.js - Changing colors of the circles in line charts

javascript

css

c3