Question

仪表颜色改变时是否可以改变标签颜色？

这是我的js小提琴-要求以与量规相同的方式为数字上色： http://jsfiddle.net/e76o9otk/735/

dataLabels: {
            format: '<div style="margin-top: -15.5px; text-align:center"><span style="font-size:10px;color:' +
                Highcharts.getOptions().colors[0] + '">{y}</span><br/>' +
                   '</div>'
        }

Answer 1

使用formatter回调函数将逻辑包括在标签文本中，如下所示：

dataLabels: {
  formatter: function() {
    let color = ''
    if (this.y > 50) {
      color = '#55BF3B' //green
    } else if (this.y > 10) {
      color = '#DDDF0D' //yellow
    } else {
      color = '#DF5353' //red
    }
    return '<div style="margin-top: -15.5px; text-align:center"><span style="font-size:10px;color:' + color + '">' + this.y + '</span><br/>' + '</div>'
    },
  }

工作中的JSFiddle示例： http://jsfiddle.net/ewolden/x6j1ywdb/

如果您希望dataLabel是渐变色，则可以实现（或借用）渐变函数，例如：Programmatically Lighten or Darken a hex color (or rgb, and blend colors)

有效的JSFiddle示例：（带有渐变dataLabel）：http://jsfiddle.net/ewolden/x6j1ywdb/12/

highcharts.js-动态标签颜色

1 个答案: