javascript - Highcharts Columnrange数据标签高低不同的颜色

在基本的Highcharts列范围图中，如何为低值分配颜色（蓝色），为高值分配不同的颜色（红色）？

我要参考的图表是这样的：http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/columnrange/

因此，对于一月份，“-9.7”应为蓝色，而“ 9.4”应为红色。

在另一个示例中，我尝试了以下操作：

    series: [{
        name: 'Temperatures',
        data: [
           {low: 2, high: 6, color: 'green'},
           {low: 1, high: 9, color: 'yellow'},
           {low: -3, dataLabels: {color: 'red'}, high: 5, color: 'blue'},
           {low: 0, high: 7, color: 'orange'}
        ],
    color: '#b9deea',
    borderColor: '#92cbde',
    borderRadius: 4
    }]

但这会将蓝色列的低值和高值的数据标签颜色都更改为红色。

提前致谢。

猴面包树

最佳答案

更新的答案

在格式化程序回调中，您可以将文本包装在span内并对其设置适当的样式。

formatter: function () {
                    var color = this.y === this.point.high ? 'red' : 'blue';

                    return '<span style="color:' + color + '">' + this.y + '°C</span>';
                }

例如：http://jsfiddle.net/6ofbr32b/1/

着色点片段

您必须将一个点分为两个点-代表其负值和正值，将阈值设置为0和negativeColor。然后调整工具提示和数据标签。

拆分可以通过这种方式实现；

//plotOptions.columnRange
negativeColor: 'red',
threshold: 0,
borderWidth: 0,

//series
keys: ['x', 'low', 'high', 'part'],
  data: [
    [0,-9.7, 0, 'neg'],
    [0,0,9.4, 'pos'],
    [1,-8.7, 0, 'neg'],
    [1, 0, 6.5, 'pos'],
    [2,-3.5, 0, 'neg'],
    [2, 0, 9.4, 'pos'],
    [3,0.0, 22.6],
    [4,2.9, 29.5],
  ]

“零件”是一个帮助器，对于调整工具提示和数据标签非常有用。

数据标签，因此如果分割点，将仅显示一条边

dataLabels: {
      enabled: true,
      formatter: function() {
        if (this.point.part === 'neg' && this.y === this.point.low) {
            return this.y + '°C';
        } else if (this.point.part === 'pos' && this.point.high === this.y) {
            return this.y + '°C';
        } else if (!this.point.part) {
            return this.y + '°C';
        }
        return '';
      }
    }

和工具提示

tooltip: {
  pointFormatter: function () {
    var points = this.series.points,
            low = this.low,
        high = this.high;
    if (this.part === 'neg') {
        low = this.low;
      high = points[this.index + 1].high;
    } else if (this.part === 'pos') {
        low = points[this.index - 1].low;
      high = this.high;
    }
    return '<span style="color:' + this.series.color + '">\u25CF</span> ' + this.series.name + ': <b>' + low + '°C</b> - <b>' + high + '°C</b><br/>';
  }
},

例如：http://jsfiddle.net/xdg67kuo/3/

使用堆积的柱形图也可以实现所需的效果：
example

关于javascript - Highcharts Columnrange数据标签高低不同的颜色，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40336647/