Javascript Highcharts Columnrange数据标签高和低不同颜色

在基本的Highcharts列范围图中，如何将颜色（蓝色）指定给低值，将不同的颜色（红色）指定给高值

我所指的图表如下：

因此，一月的“-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>';
                }

“零件”是一个辅助工具，可用于调整工具提示和数据标签

数据标签，以便在分割点时仅显示一条边

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/>';
  }
},

工具提示：{
pointFormatter:函数（）{
var points=this.series.points，
low=这个，
high=this.high；
如果（this.part=='neg'）{
低=这个低；
高=点[this.index+1]。高；
}else if（this.part==='pos'）{
low=点[this.index-1]。low；
high=this.high；
}
返回“\u25CF”+this.series.name+”：“+low+”°C-“+high+”°C
”；
}
},

例如：

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

最新答案 在格式化程序回调中，您可以将文本包装在

span

中并正确设置其样式

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

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

“零件”是一个辅助工具，可用于调整工具提示和数据标签

数据标签，以便在分割点时仅显示一条边

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/>';
  }
},

工具提示：{
pointFormatter:函数（）{
var points=this.series.points，
low=这个，
high=this.high；
如果（this.part=='neg'）{
低=这个低；
高=点[this.index+1]。高；
}else if（this.part==='pos'）{
low=点[this.index-1]。low；
high=this.high；
}
返回“\u25CF”+this.series.name+”：“+low+”°C-“+high+”°C
”；
}
},

例如：

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

---

我认为这并不能回答这个问题，这是关于给数据标签上色，而不是实际的数据点，也不一定是关于正/负，而是关于数据点的高/低值。您列出的相同策略也可以用来回答这个问题，但是，如果调整为专门解决数据标签的颜色，而不是pointNice答案，则比我想象的要简单。谢谢。这是必要的，比我预期的要简单得多。我不认为这回答了问题，这是关于给数据标签上色，而不是实际的数据点，也不一定是关于正/负，而是关于数据点的高/低值。您列出的相同策略也可以用来回答这个问题，但是，如果调整为专门解决数据标签的颜色，而不是pointNice答案，则比我想象的要简单。谢谢。这是必要的，比我预期的要简单得多。