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

【问题标题】：How would I overlay a scatter plot on a mirrored bar chart in Highcharts?如何在 Highcharts 的镜像条形图上叠加散点图？
【发布时间】：2019-07-17 17:27:20
【问题描述】：

我正在尝试向 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;

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

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

【问题讨论】：

标签： javascript reactjs highcharts bar-chart scatter-plot

【解决方案1】：

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

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

现场演示： http://jsfiddle.net/BlackLabel/Ld0hjybv/

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

【讨论】：