如何访问highcharts的plotOptions中的'this'字段

Question

我正在努力实现两件事：

1. 根据高图中柱形图的数据点应用绿色或红色。假设如果列高于50，则边框为绿色，否则为红色。

2. 我想在几张图表中放置一个图标（如果图标不可用，至少是文字），如果它们有某些属性的话。

我正在尝试做以下事情：

plotOptions:{
        column:{
            borderColor: this.y > 50 ? 'green' : console.log(this),
            dataLabels: {
                            format: this.prop : 'i': '', //will put 'i' as icon
                            enabled: true,
                            align: 'top',
                            color: '#fff',
                            inside: true
                        }
        },

    },

我的条形图系列是：

 series: [{
            name: 'Defect per sprint',
            data: [0, 0, 0, 2, 10, 2, 5, 3]
            }]

如果我将borderColor保留为系列，则会将其应用于所有列 但似乎plotOptions没有提供'this'实例。所以上面的代码不起作用。我怎样才能实现上述目标？

Answer 1

1）我不知道在图表创建方面这样做的方法。但是，您可以在创建图表后循环遍历系列数组以更新每个列的边框颜色。在循环内部，在检查列值是否高于50之后，您将使用update方法。示例如下：

chart.series[i].update({borderColor: '#00FF00'})

2）我现在有一段时间没有使用过Highcharts，但以下情况曾经发挥作用：而不是format，定义一个formatter函数。

dataLabels: {
  formatter: function () {return this.prop ? 'i' : ''}, //will put 'i' as icon
  ...
}

Answer 2

我会通过预处理数据来做到这一点。

您可以遍历数据数组并检查任何值，并相应地应用任何级别的格式。

示例：

var data = [1, 2, 3, 5, 9, 8, 7, 4, 5, 6, 9, 7, 5, 3, 6, 9, 7, 5, 9],
  processedData = [];

$.each(data, function(i, point) {
  processedData.push(
    (
      point < 6 ? {
        "y": point,
        "color": "rgba(204,0,0,0.75)",
        "dataLabels": {
          "enabled": true
        }
      } : point
    )
  )
});

这循环遍历一个数组，检查一个小于6的值 - 如果找到，它会为该点应用不同的颜色，并启用数据标签，否则，它只是将该点添加为单个值，并且图表配置确定其颜色和其他属性。

在图表配置中，您可以指定dataLabels属性的详细信息，并设置enabled: false，以便它们仅用于您启用它们的点。

小提琴：

• http://jsfiddle.net/jlbriggs/3d3fuhbb/178/

输出：