如何使用 reactjs 启用滚动条？

Question

我用谷歌搜索，他们说我需要 highstock 模块，但我不想使用 <script type="text/javascript" src="http://code.highcharts.com/stock/highstock.js"></script> （我不知道在哪里导入它..）有导入 highstock 模块的反应方式吗？

我试过这个：

import Highcharts from 'highcharts/highstock';
import HighchartsReact from 'highcharts-react-official';
import HC_more from 'highcharts/highcharts-more';
    <HighchartsReact
                    allowChartUpdate={true}
                    updateArgs={[true, true, true]}
                    hicharts={Highcharts}
                    options={chartConfig}
                    ref={chart}
                ></HighchartsReact>

and the chartConfig:

const chartOption = {
    chart: {
      type: "bar"
    },
    scrollbar: {
      enabled: true
    },
    xAxis: {
      scrollbar: {
        enabled: true
      },
      min: 0,
      max: 2,
    },
    series: [
      {
        name: "Browsers",
        colorByPoint: true,
        data: chartData
      }
    ]
  };

它对我不起作用。这是演示： https://stackblitz.com/edit/react-highchart-jjzjx118

Answer 1

您已经在此处导入了 Hightock：

import Highcharts from 'highcharts/highstock';

您应该可以通过以下方式启用 scrollbar：

scrollbar: {
  enabled: true
}

现场演示： https://codesandbox.io/s/highcharts-react-demo-2dwcc

如何使用 reactjs 启用滚动条？

how to enable scroll bar with reactjs?

highcharts

reactjs

react-highcharts