Question

目前我要求有一个带有两个目标（最小和最大）的子弹图。要做到这一点，我只是使用带有Scatter系列的普通子弹图来绘制另一个目标。我想在子弹图中包含这种行为，所以它会有类似以下的选项：

series: [{
    data: [{
        y: 275,
        target: 250,
        minTarget: 100
    }]
},

然后，在换行中，我会得到这个minTarget并自动制作散点图。我该怎么办？

这是我到目前为止的小提琴：http://jsfiddle.net/gwkxd02p/

Answer 1

我不认为render是添加其他系列的好方法 - 无论如何，您可以尝试这样做：

Highcharts.wrap(Highcharts.seriesTypes.bullet.prototype, 'render', function(p) {
  if (!this.hasRendered) {
    const scatterData = this.points
      .map(({ x, y, options }) => ({
        x,
        y: options.minTarget !== undefined ? options.minTarget : null
      }))

    if (scatterData.length) {
      const scatter = this.chart.addSeries({
        type: 'scatter',
        data: scatterData,
        marker: {
          symbol: 'line',
          lineWidth: 3,
          radius: 8,
          lineColor: '#000'
        }
      }, false)

      scatter.translate()
      scatter.render()
    }
  }

  p.call(this)
})

子弹的数据：

  series: [{
data: [{
  y: 275,
  target: 250,
  minTarget: 100
}, {
  y: 100,
  target: 50
}, {
  y: 500,
  target: 600,
  minTarget: 20
}]

直播示例：http://jsfiddle.net/n4p0ezzw/

我认为更好的地方是子弹init方法，但在该方法中，这些点尚不存在 - 因此您必须匹配x值（如果需要））你自己。

我的建议是 - 如果你不必要，不要包装Highcharts。更好（更简单，更安全，更干净，更容易调试，它不会更改Highcharts内部代码）的做法是将Highcharts构造函数包装在一个函数中并解析其中的选项，然后使用新选项调用图表构造函数，例如：

function customBullet(container, options) {
  const newOptions = {} // parse options, check for minTarget, etc. and create new options

  return Highcharts.chart(container, newOptions)
}

如何在插件中包装此行为？

1 个答案: