HighCharts : 是不是可以自定义个别系列的颜色？

Posted 2023-02-16

【中文标题】HighCharts : 是不是可以自定义个别系列的颜色？

【英文标题】：HighCharts : Is it possible to customize the colors of individual series?HighCharts : 是否可以自定义个别系列的颜色？

【发布时间】：2011-08-09 07:17:25

【问题描述】：

我正在使用 HighCharts 制作折线图报告。在这个特定的报告中，我被要求自定义每个系列的颜色。该系列将始终保持不变。比如：

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

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

【参考方案1】：

可以为每个系列单独设置选项。

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

【讨论】：

谢谢！参考文档使您看起来只能为所有系列设置选项。当我看到它时，我认为这很奇怪，但这说明了这一点。

你能把那个颜色变成有条件的吗？想知道您是否可以通过格式化程序获得颜色。

【参考方案2】：

如果您阅读 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