HighCharts：是否可以自定义各个系列的颜色？ [英] HighCharts : Is it possible to customize the colors of individual series?

问题描述

我正在使用HighCharts作为线图报告。在这个特定的报告中，我被要求定制每个系列的颜色。该系列将永远保持不变。例如：

John系列：蓝色虚线
玛丽系列：实心红线

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

解决方案

可以为每个系列分别设置选项。

  var chart = new Highcharts.Chart（{
图表：{
 renderTo：'container'
}，
 xAxis：{
类型：'datetime'
}，
 
系列：[{
 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] 
] 
}，{
名称：'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示例

I am using HighCharts for a line graph report. In this specific report I have been asked to Customize the colours of each series. The series will always stay the same. So for example:

John series: Blue dashed line Mary series: Solid Red Line

Does anyone know how to accomplish this?

解决方案

Options can be set separately for each series.

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

这篇关于HighCharts：是否可以自定义各个系列的颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！