HighCharts：是否可以自定义各个系列的颜色？

我正在使用HighCharts作为折线图报告。在这个特定的报告中，我被要求定制每个系列的颜色。该系列将永远保持不变。因此，例如：HighCharts：是否可以自定义各个系列的颜色？

约翰系列：蓝虚线玛丽系列：红色实线

有谁知道如何做到这一点？

2011-04-20 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 Example

来源

2011-04-20 20:47:16

感谢这个！参考文档似乎只能为所有系列设置选项。我认为这很奇怪，但是这很清楚。 – 2012-01-09 09:38:23

你可以使该颜色有条件吗？想知道是否可以通过格式化程序获取颜色。 – tsquillario 2012-04-16 19:43:18

真棒@EricC！保存我的一天.. – 2015-07-17 09:10:04

如果你读了API here，你会看到下面的文字。

甲级

实际系列附加到该图表。除了下面列出的成员之外，该特定类型图的plotOptions的任何成员都可以单独添加到系列中。例如，即使在plotOptions.series中指定了一般lineWidth，也可以为每个系列指定个人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

来源

2013-02-15 04:22:13

HighCharts：是否可以自定义各个系列的颜色？

回答

相关问题