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

【问题标题】：C3.js - Changing colors of the circles in line chartsC3.js - 改变折线图中圆圈的颜色
【发布时间】：2015-07-14 06:24:26
【问题描述】：

我正在使用 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 函数中使用它。

【问题讨论】：

标签： javascript css c3

【解决方案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.

【讨论】：