Highchart / Highstock 堆栈柱状图一次显示一个系列的工具提示

问题描述

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

有问题的工作代码示例 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,[1620117540000,400]
    ],legendindex: 0
  },{
    name: "US Central",263],264],264]
    ],legendindex: 3
  },{
    name: "US East",232],230],229],227]
    ],legendindex: 4
  },{
    name: "US northeast",406],407],404],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"));

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

解决方法

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

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

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

highcharts highcharts react-highcharts