Highcharts

Question

我有一个类似于此条形图的高位图表：http://jsfiddle.net/s4zzpLzL/

我如何拆分条形颜色，使 500 之前的条形颜色为灰色，之后的条形颜色为您在屏幕上看到的颜色？见下图。

Answer 1

您可以在每个系列中使用 zones：

zones: [{
        value: 500,
        color: '#A0A0A0'
}]

value 是直到值，color 是该区域的颜色。这是您编辑的 FIDDLE

编辑：

您也可以使用 plotBands 但这并不是您想要的：DEMO

还有一个插件，我认为它不能完全满足您的要求：Plugin

除了这些我认为没有其他方法，除非您更改数据并使用 stacked bar 图表。不过，您将不得不更改所有数据，这会很麻烦。

Answer 2

可以设置系列的渐变色，演示：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]
    }]
});

该解决方案的唯一问题是您无法指定（在值中）中断的位置 - 尝试调整图表大小。因此，您需要在每次 window 调整大小等时更新系列颜色渐变

Answer 3

您可以使用分组、阈值和negativeColor 的概念来实现这一点。使用相同的数据创建 2 个系列并将它们与 grouping: false 和 negativeColor: 'transparent'

重叠

演示： https://jsfiddle.net/1dp8L1gw/

plotOptions: {
    bar: {
        grouping: false,
        borderWidth: 0
    }
},
series: [{
    name: 'Tokyo',
    data: [45.9, 71.5, 106.4],
    color: 'red'
}, {
    name: 'Tokyo',
    data: [45.9, 71.5, 106.4],
    color: 'blue',
    threshold: 50,
    negativeColor: 'transparent'
}]

Highcharts - 条形图的分色

High Charts - Split color of bar chart