2

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データ ポイントごとに、配列の対応する色で塗りつぶしたいと考えています。generateCSS を使用する必要がありますが、この関数内でそれを行う方法がわかりません。

4

1 に答える 1

3

いくつか試した後、私はそれを行う方法を見つけました。

配列は関数colors内にあってはなりませんgenerate。以下に示すように関数の外で宣言し、次に示すようにプロパティをgenerate使用してすべてのポイントに色を割り当てます。colorc3

    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];    
        }
    },
});

これの動作は、このフィドルに示されています。

于 2015-07-14T08:08:43.370 に答える