Question

我已经构建了一些HighChart，我想给3列不同的颜色（并不只是蓝色作为当前的highChart请参阅下面的jsfiddel链接），以便让人们在看一下时看到差异很简单我的HighChart。

Highcharts.chart('container',
 {
     chart: {
         type: 'columnrange',
         inverted: true,
         height: 200,
         spacingLeft: 30
     },
     credits: {
         enabled: false
     },
     title: {
         text: null,
         style: {
             "fontSize": "10px"
         }
     },
     subTitle: {
         text: null
     },
     legend: {
         enabled: false,
     },
     plotOptions: {
         series: {
             pointWidth: 30
         }
     },
     xAxis: {
         min: 1,
         max: 1,
         categories: ['', ''],
         title: {
             text: null
         },
         labels: {
             rotation: 90
         },
         gridLineWidth: 0
     },
     yAxis: {
         type: 'datetime',
         title: {
             text: null
         },
         labels: {
             rotation: -45,
             style: {
                 "fontSize": "10px"
             }
         },
         tickInterval: 1800000,
         gridLineWidth: 1
     },
     series: [{
         data: [
             [1, 1483337940000, 1483338000000],
             [1, 1483338300000, 1483339740000],
             [1, 1483340580000, 1483340640000],
             [1, 1483340640000, 1483340820000],
             [1, 1483340820000, 1483341000000],
             [1, 1483342800000, 1483342860000],
             [1, 1483342860000, 1483342920000],
             [1, 1483342920000, 1483342980000],
             [1, 1483346460000, 1483346520000],
             [1, 1483347120000, 1483347180000],
             [1, 1483347180000, 1483348440000],
             [1, 1483348440000, 1483348620000],
             [1, 1483348620000, 1483348740000],
             [1, 1483350180000, 1483350240000],
             [1, 1483350420000, 1483351380000],
             [1, 1483353300000, 1483353420000],
             [1, 1483355280000, 1483355340000],
             [1, 1483358580000, 1483359780000],
         ]
     }]
 }

);

Answer 1

您可以用对象替换每个点数组并声明单独的颜色。

{x:1, low: 1483337940000, high:1483338000000,color: 'red'},

示例：

https://jsfiddle.net/ch4683os/

Answer 2

Zones在这里可能对你更好。这样颜色属于图表而不是数据。区域value代表下一个x范围。

以下是Highcharts文档的示例：

Highcharts.chart('container', {
    series: [{
        data: [-10, -5, 0, 5, 10, 15, 10, 10, 5, 0, -5],
        zones: [{
            value: 0,
            color: '#f7a35c'
        }, {
            value: 10,
            color: '#7cb5ec'
        }, {
            color: '#90ed7d'
        }]
    }]
});

http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/series/color-zones-simple/

另见：http://api.highcharts.com/highcharts/plotOptions.column.zones

给列范围不同的颜色

2 个答案: