高图 - 条形图的分色 [英] High Charts - Split color of bar chart

问题描述

我有一个与此条形图相似的高图表：

  $（'＃容器'）.highcharts（{
图：{
类型：'bar'
}，
系列：[{
 color：{
 linearGradient：[ 0，0，500]，
停止：[
 [0，'＃ff0ff0']，
 [0.5，'＃ff0ff0']，
 [0.5，' ＃f0f00f'] 
] 
}，
数据：[29.9,71.5,106.4,129.2,144.0,176.0,135.6,148.5,216.4,194.1,95.6,54.4] 
 }，{
 data：[144.0，176.0，135.6，148.5，216.4，194.1，95.6，54.4，29.9，71.5，106.4，129.2] 
}] 
}）; 
  

该解决方案的唯一问题是您无法指定（在值中）哪里将会中断 - 尝试调整图表大小。所以你需要更新每个窗口的系列颜色渐变等。

I have a High Chart chart similar to this bar chart: http://jsfiddle.net/s4zzpLzL/

How would I got about spliting the bar colors so that the color of the bar up until 500 is grey and the color of the bar after is the color you see on the screen? See image below.

解决方案

You can set gradient color for series, demo: http://jsfiddle.net/pscwnzk7/1/

$('#container').highcharts({
    chart: {
        type: 'bar'
    },
    series: [{
        color: {
            linearGradient: [0, 0, 0, 500],
            stops: [
                [0, '#ff0ff0'],
                [0.5, '#ff0ff0'],
                [0.5, '#f0f00f']
            ]
        },
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }, {
        data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
    }]
});

The only problem with that solution is that you can't specify (in values) where will be break - try to resize chart. So you would need to update series color gradient on each window resize etc.

这篇关于高图 - 条形图的分色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！