Question

我在迭代此图表的数据时遇到了一些问题。它使用的是HighchartJS，非常简单，但如果值小于1000，我需要为步骤的列着色，并且不起作用。

这是我的颜色属性的EEFE函数。 this.data的地方未定义。知道如何打印正确的颜色吗？

NotificationListenerService

链接到我的示例

Fiddle link 的更新

谢谢大家！@HalvorStrand我使用了区域属性，现在就像一个魅力。

series: [{
  data: [1600, 3000, 400, 700, 1234, 765, 76],
  color: (function() {
      for (var i in this.data) {
        var value = this.data[i];
        if (value > 1000)
        {
          this.value = '#75ad74';
          return this.value;
        } 
        else if (value < 1000)
        {
          this.value = '#FF0000';
          return this.value;
        }
      }
    })()
}]

Answer 1

正如我在评论中所说，IIFE中的this是窗口对象。如果你想凭空创建一个自构造对象并将其作为参数传递，你可以这样做。我对HighCharts不是很熟悉，但我想第二个片段是正确的数据结构，其中各个点都有自己的颜色定义。

var myObj = {
          xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        plotOptions: {
            series: {
                allowPointSelect: true
            }
        },
  
        series: [{
                  data: [1600, 3000, 400, 700, 1234, 765, 76],
                 color: []
                 }],
          init: function() {
                  this.series[0].color = this.series[0].data.map(e => e >= 1000 ? '#75ad74' : '#FF0000');
                  delete this.init;
                  return this;
                }
}.init();

console.log(myObj);

我猜这是HighCharts的正确series[0].data结构。

var myObj = {
          xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        plotOptions: {
            series: {
                allowPointSelect: true
            }
        },
  
        series: [{
                  data: [1600, 3000, 400, 700, 1234, 765, 76],
                 }],
          init: function() {
                  this.series[0].data = this.series[0].data.map(e => e >= 1000 ? {y: e, color: '#75ad74'}
                                                                               : {y: e, color: '#FF0000'});
                  delete this.init;
                  return this;
                }
}.init();

console.log(myObj);

在实际应用程序中，您将此对象定义作为highcharts函数的参数提供。

根据数据值更改colum上的颜色代码（highchartJS）

1 个答案: