使用高图创建深度图并创建出价和要价，以使出价和要价是从图表的中心创建的

Question

我正在出价，并要求数据创建深度图。

因此，在下图中，我具有相同长度的多个出价和多个要价。因此，中心的当前价格线仍在中心。

但是，如果买入或卖出的长度大于另一个，则当前价格中心线将移动到图表的任一侧。我需要始终将这条线放置在中心。

如图2中所示，当要价数量仅为1时，当前价格中心线将移至图形的右侧。我怎么总是让它停留在中心？还要记住，我需要在中心线的左侧询问，并在中心线的右侧出价。这些都应源自中心线

Answer 1

您可以通过基于chart.events.render回调函数中的计算值动态添加plotLine来实现。查看下面的演示和代码：

chart: {
  type: 'area',
  zoomType: 'xy',
  events: {
    load: function() {
      const chart = this;

      setTimeout(function() {
        chart.series[0].addPoint([
          0.1513,
          34.1319
        ]);
      }, 2000);
    },
    render: function() {
      const chart = this;
      const xAxis = chart.xAxis[0];

      let xData1 = chart.series[0].xData,
        xData2 = chart.series[1].xData,
        value = (xData1[0] + xData2[xData2.length - 1]) / 2;

      if (chart.customPriceValue !== value) {
        chart.customPriceValue = value;

        xAxis.update({
          plotLines: [{
            color: '#888',
            value: value,
            width: 1,
            label: {
              text: 'Actual price',
              rotation: 90
            }
          }]
        });
      }
    }
  }
}

Demo：

• https://jsfiddle.net/BlackLabel/zrd3meyq/1/

API参考：

• https://api.highcharts.com/highcharts/chart.events.load

• https://api.highcharts.com/class-reference/Highcharts.Axis#update