react 项目使用highcharts滚动条来展示数据

在使用图表画图的时候总会，由于展示的面积有限，无法将数据完全展示到图表中，这个时候就可能考虑使用滚动条来滑动展示数据。
讲一下过程，我首先找资源，找到了这个，发现很适合我的需求。

highcharts很有意思，他单独的为react创立了一个包叫react-highcharts,如果你引入这个包，并且你想使用滚动条来实现，要引入：
var ReactHighstock = require('react-highcharts/bundle/ReactHighstock.src');
这个路径多说一句，我在网上搜到的教程，他给出的引入路径是这样的
const ReactHighstock = require('react-highcharts/ReactHighstock.src')
或者
import ReactHighstock from 'react-highcharts/ReactHighstock.src'
但是我这样引入，他会告诉我找不到路径报错，大家使用的时候可以适当调整一下，这个东西坑了我好长时间。
接着说，通过react这种方式引用的图表，同样的数据和配置，我看到的效果确实这样的：

这就很神奇了，难不成这个react-highcharts和highcharts还不一样不成？我是没有发现什么规律，所以我就准备抛弃react-highcharts这个包了。
yarn add highcharts
引入包：require('highcharts/highstock.src');
dom节点写一个div

return (
        <div style={{ overflow: 'hidden' }}>
            <div id='container'></div>
        </div>
);

然后在一个函数内[比如componentDidMount]添加如下代码

$(function () {
            $('#container').highcharts({
                chart: {
                    type: 'bar',
                    marginLeft: 150
                },
                title: {
                    text: '截止 2016年4月 Highcharts 最受欢迎的功能需求'
                },
                subtitle: {
                },
                xAxis: {
                    type: 'category',
                    title: {
                        text: null
                    },
                    min: 0,
                    max: 4,
                    scrollbar: {
                        enabled: true
                    },
                    tickLength: 0
                },
                yAxis: {
                    min: 0,
                    max: 1200,
                    title: {
                        text: '投票数',
                        align: 'high'
                    }
                },
                plotOptions: {
                    bar: {
                        dataLabels: {
                            enabled: true
                        }
                    }
                },
                legend: {
                    enabled: false
                },
                credits: {
                    enabled: false
                },
                series: [{
                    name: '投票',
                    data: [
                        ["甘特图", 1000],
                        ["自动计算趋势线", 575],
                        ["增加导航器用于多个数据列", 523],
                        ["动态调整图表字体", 427],
                        ["多坐标轴及对其方式控制", 399],
                        ["不规则时间的堆叠图", 309],
                        ["图表高度根据图例高度自适应", 278],
                        ["图表数据导出为 Excel 文件", 239],
                        ["图例切换", 235],
                        ["韦恩图", 203],
                        ["范围选择器可调整位置", 182],
                        ["可拖动的图例", 157],
                        ["桑基图", 149],
                        ["Highstock Y轴滚动条", 144],
                        ["x轴分组", 143],
                        ["ReactJS 插件", 137],
                        ["3D 曲面图", 134],
                        ["在股票图中数据分析线", 118],
                        ["数据库功能模块", 118],
                        ["可拖动的点", 117]
                    ]
                }]
            });
        });

就可以如愿显示了，下面看效果截图：