时间戳

首页 > 解决方案 > 如何使用 highcharts-react 将默认缩放设置为 6 个月？

highcharts - 如何使用 highcharts-react 将默认缩放设置为 6 个月？

问题描述

我有几个highcharts-react图表，其中默认缩放级别应为 6 个月（对于 x 轴）。有一个使用默认 Highcharts library 的解决方案，但我不明白如何使用 React 来做到这一点。

这是我走了多远：


// …

import Highcharts from "highcharts/highstock";
import HighchartsReact from "highcharts-react-official";
import more from "highcharts/highcharts-more";

// …

if (typeof Highcharts === "object") {
  more(Highcharts);
}

// …

<HighchartsReact
  highcharts={Highcharts}
  constructorType={"stockChart"}
  options={{
    credits: {
      enabled: false
    },
    xAxis: {
      events: {
        setExtremes: () => {
          // Is this right? What should be in this function?
        }
      }
    },
    series: [
      {
        type: "candlestick",
        name: props.timeSeries.name,
        data: openHighLowClose
      }
    ]
  }}
/>

标签： highcharts

解决方案

我看到您正在创建一个stockChart，因此在这种情况下，您可以使用rangeSelector功能设置显示范围。

下面是一个演示，我将选定的按钮设置为 2，默认情况下等于 6 个月。您可以在我上面发布的 API 中找到更多信息。

演示：https ://codesandbox.io/s/highcharts-react-demo-yjtgj

推荐阅读