高库存不显示库存工具

Question

我正在尝试绘制时间序列，但没有得到此图表左侧的库存工具。 highstocks网站上的示例：enter link description here

带有选项的代码：

import React from 'react';
import Highcharts from 'highcharts/highstock'
import HighchartsReact from 'highcharts-react-official'


class Graph extends React.Component {
    getOptions = (dataSets) => {
        return {
            yAxis: [{
                labels: {
                    align: 'left'
                },
                height: '80%',
                resize: {
                    enabled: true
                }
            }, {
                labels: {
                    align: 'left'
                },
                top: '80%',
                height: '20%',
                offset: 0
            }],

            title: {
                text: 'Summary'
            },

            series: [{
                name: 'INFY',
                data: dataSets.data
            }]
        };
    };

    render() {
        const {dataSets} = this.props;
        const options = this.getOptions(dataSets);

        return (
            <div>
                <HighchartsReact
                    highcharts={Highcharts}
                    constructorType={'stockChart'}
                    options={options}
                />
            </div>
        )
    }
}

export default Graph;

这是呈现的内容：

出了什么问题？

编辑：

应用@ppotaczek的建议后。我明白了：

更新的代码：

import React from 'react';
import Highcharts from "highcharts/highstock";
import indicatorsAll from "highcharts/indicators/indicators-all";
import annotationsAdvanced from "highcharts/modules/annotations-advanced";
import priceIndicator from "highcharts/modules/price-indicator";
import fullScreen from "highcharts/modules/full-screen";
import stockTools from "highcharts/modules/stock-tools";
import HighchartsReact from "highcharts-react-official";


indicatorsAll(Highcharts);
annotationsAdvanced(Highcharts);
priceIndicator(Highcharts);
fullScreen(Highcharts);
stockTools(Highcharts);


class Graph extends React.Component {
    getOptions = (dataSets) => {
        return {
            yAxis: [{
                labels: {
                    align: 'left'
                },
                height: '80%',
                resize: {
                    enabled: true
                }
            }, {
                labels: {
                    align: 'left'
                },
                top: '80%',
                height: '20%',
                offset: 0
            }],

            title: {
                text: 'Summary'
            },

            series: [{
                name: 'INFY',
                data: dataSets.data
            }]
        };
    };

    render() {
        const {dataSets} = this.props;
        const options = this.getOptions(dataSets);

        return (
            <div>
                <HighchartsReact
                    highcharts={Highcharts}
                    constructorType={'stockChart'}
                    options={options}
                />
            </div>
        )
    }
}

export default Graph;

Answer 1

您需要加载CSS样式并导入和初始化所有必需的模块：

import indicatorsAll from "highcharts/indicators/indicators-all";
import annotationsAdvanced from "highcharts/modules/annotations-advanced";
import priceIndicator from "highcharts/modules/price-indicator";
import fullScreen from "highcharts/modules/full-screen";
import stockTools from "highcharts/modules/stock-tools";

indicatorsAll(Highcharts);
annotationsAdvanced(Highcharts);
priceIndicator(Highcharts);
fullScreen(Highcharts);
stockTools(Highcharts);

实时演示： https://codesandbox.io/s/highcharts-react-demo-3s8v7

文档： https://www.highcharts.com/docs/stock/stock-tools