我如何在 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

我如何在 Highcharts 的镜像条形图上叠加散点图？

How would I overlay a scatter plot on a mirrored bar chart in Highcharts?

javascript

scatter-plot

bar-chart

highcharts

reactjs