如何将散点图叠加在Highcharts的镜像条形图中？

Question

我正在尝试将散点图添加到Highcharts中的镜像条形图中。我正在使用React，但是Highcharts配置只是普通的JS。

我正在尝试将散点图标记放在小节的末尾。我有两个散布系列，一个用于镜子的每一侧。但是，似乎只有第二个系列可以正确映射（附加图像）。

我用于实现此目的的代码是

import React from "react";
import * as Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";

const MirroredBarChart = () => {
  const data = [[-10, -50], [50, 10]];

  const series = [
    {
      color: "coral",
      data: data[0],
      stack: "X"
    },
    {
      color: "turquoise",
      data: data[1],
      stack: "X"
    },
    {
      type: "scatter",
      data: data[0],
      stack: "X",
      color: "black",
      marker: {
        symbol: "circle"
      }
    },
    {
      type: "scatter",
      data: data[1],
      stack: "X",
      color: "black",
      marker: {
        symbol: "diamond"
      }
    }
  ];

  const options = {
    chart: {
      type: "bar"
    },
    plotOptions: {
      series: {
        stacking: "normal"
      }
    },
    series
  };

  return <HighchartsReact highcharts={Highcharts} options={options} />;
};

export default MirroredBarChart;

一个奇怪的事情是，如果我在数组中切换散点图系列项，它始终是正确绘制的最后一项。

我在做蠢事吗？有人知道如何解决这个问题吗？

Answer 1

该问题是由stacking引起的，它为column和bar系列中的负值创建了一个单独的堆栈。作为解决方案，您只能为bar系列设置堆叠：

plotOptions: {
    bar: {
        stacking: "normal"
    }
}

---

实时演示： http://jsfiddle.net/BlackLabel/Ld0hjybv/

API参考： https://api.highcharts.com/highcharts/plotOptions.series.stacking