web-dev-qa-db-ja.com

HighCharts：個々のシリーズの色をカスタマイズすることは可能ですか？

折れ線グラフレポートにHighChartsを使用しています。この特定のレポートでは、各シリーズの色をカスタマイズするよう求められています。シリーズは常に同じままです。たとえば、次のとおりです。

ジョンシリーズ：青い破線メアリーシリーズ：赤い実線

誰もこれを達成する方法を知っていますか？

javascriptgraphhighcharts
52
Tjaart

オプションは、シリーズごとに個別に設定できます。

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container'
    },
    xAxis: {
        type: 'datetime'
    },

    series: [{
        name: 'John',
        color: '#0066FF',
        dashStyle: 'ShortDash',
        data: [
            [Date.UTC(2010, 0, 1), 29.9],
            [Date.UTC(2010, 2, 1), 71.5],
            [Date.UTC(2010, 3, 1), 106.4]
        ]
    },{
        name: 'Mary',
        color: '#FF0000',
        data: [
            [Date.UTC(2010, 0, 1), 60.9],
            [Date.UTC(2010, 1, 1), 40.5],
            [Date.UTC(2010, 2, 1), 90.0],
            [Date.UTC(2010, 3, 1), 80.4]
        ]
    }]
});

JsFiddleの例

104
Eric C

Api here を読むと、次のテキストが表示されます。

シリーズ

チャートに追加する実際のシリーズ。以下にリストされているメンバーに加えて、その特定のタイプのプロットのplotOptionsのメンバーをシリーズに個別に追加できます。たとえば、一般的なlineWidthがplotOptions.seriesで指定されていても、個々のlineWidthをシリーズごとに指定できます。

したがって、plotOptionsから任意のものを追加できます。

デモ：

series: [{
    name: 'serie1',
    data: [0,1,2,3,4,5,6,7,8,9],
    color: '#FFFF00',
    lineWidth: 4,
    id: 'serie1',
    step: true
}]

Working demo

8
Ricardo Alvaro Lohmann