【问题标题】:how to enable scroll bar with reactjs?如何使用 reactjs 启用滚动条?
【发布时间】:2020-05-06 09:09:19
【问题描述】:

我用谷歌搜索,他们说我需要 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

【问题讨论】:

  • 你的标题和你的问题完全不同,你到底在找什么
  • 对不起,我正在寻找使用 react-highcharts 启用滚动条的方法,我尝试了一些方法但没有奏效。我不确定问题是否与导入 highstock 模块有关。

标签: reactjs highcharts react-highcharts


【解决方案1】:

您已经在此处导入了 Hightock:

import Highcharts from 'highcharts/highstock';

您应该可以通过这种方式启用scrollbar

scrollbar: {
  enabled: true
}

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

【讨论】:

  • 感谢您的回答,您的演示工作正常,但在我的演示中不起作用:stackblitz.com/edit/react-highchart-jjzjx118 您可以看看吗?我认为配置是完全一样的
  • 嗨@jjzjx118_2,您需要将:&lt;HighchartsReact hicharts={Highcharts} options={option} /&gt; 更改为&lt;HighchartsReact highcharts={Highcharts} options={option} /&gt;
  • 谢谢你......我不敢相信我犯了这么愚蠢的错误......
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2023-02-09
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-05-05
  • 2014-04-07
  • 2020-06-07
相关资源
最近更新 更多