Highcharts / Highstock 堆积柱形图一次显示一个系列的工具提示

Question

这是代码和图像，我希望在其中一次显示一个信息有限的工具提示：- 如果我将鼠标悬停在印度西部数据上，它应该只显示印度西部数据

有问题的工作代码示例 https://codesandbox.io/s/pie-chart-forked-oczpn?file=/src/index.js:0-1536

注意：-我在这里使用股票图表，因为我希望导航器位于我的图表下方。

import React from "react";
import { render } from "react-dom";
// I am using highstock instance
import Highcharts from "highcharts/highstock";
import HighchartsReact from "highcharts-react-official";
import "./style.css";

// row data
const data = [
  {
    name: "India West",
    data: [
      [1620117360000, 398],
      [1620117420000, 399],
      [1620117480000, 399],
      [1620117540000, 400]
    ],
    legendIndex: 0
  },
  {
    name: "US Central",
    data: [
      [1620117360000, 263],
      [1620117420000, 264],
      [1620117480000, 264],
      [1620117540000, 264]
    ],
    legendIndex: 3
  },
  {
    name: "US East",
    data: [
      [1620117360000, 232],
      [1620117420000, 230],
      [1620117480000, 229],
      [1620117540000, 227]
    ],
    legendIndex: 4
  },
  {
    name: "US Northeast",
    data: [
      [1620117360000, 406],
      [1620117420000, 407],
      [1620117480000, 404],
      [1620117540000, 405],
    ],
    legendIndex: 2
  }
];

const navData = data.map((series) => ({
  data: series.data,
  stacking: "normal",
  name: series.name,
  type: "column"
}));

const options = {
  chart: {
    type: "column"
  },
  

  plotOptions: {
    column: {
      stacking: "normal",
    },
  },
  rangeSelector: {
    enabled: false
  },
  navigator: {
    enabled: true,
    height: 70,
    series: navData
  },
  series: data
};

const App = () => (
  <div>
    <HighchartsReact
      highcharts={Highcharts}
      constructorType={"stockChart"}
      options={options}
    />
  </div>
);

render(<App />, document.getElementById("root"));

请帮助我如何在具有堆栈数据的多个系列的情况下实现单独的工具提示。

Answer 1

我在使用 React 的情况下找到了解决方案。如果我们希望每个工具提示默认分开。

我们不需要传递构造函数类型

const App = () => (
  <div>
    <HighchartsReact
      highcharts={Highcharts}
      ***constructorType={"stockChart"}*** // Just remove this line
      options={options}
    />
  </div>
);

Highcharts / Highstock 堆积柱形图一次显示一个系列的工具提示

Highchart / Highstock stack column chart show one series's tooltip at a time

highcharts

react-highcharts