如何使基本区域高图表响应?

问题描述 投票:0回答:0

High Charts 中的基本面积图只有在页面不刷新时才响应,一旦页面刷新就不会响应。

enter image description here 是响应代码的页面图像

enter image description here这是没有响应时同一页面的图像

我试过这个 https://codesandbox.io/s/highcharts-react-demo-ko0m91?file=/demo.jsx 还是不行

// 完整代码如下

import * as Yup from 'yup';
import React, { useState } from 'react';
import Highcharts from "highcharts/highstock";
import HighchartsReact from "highcharts-react-official";

export default function graph() {
const options = {
    title: {
        text: 'Emotion Analysis'
    },
    series: [{
        type: 'area',
        name: 'Honduras',
        data: [0.9, 0.1, 0.8, 0.7, 0.5]
    },
    {
        type: 'area',
        name: 'Spain',
        data: [0.3, 0.1, 0.0, 0.2, 0.1]
    },
    {
        type: 'area',
        name: 'Afghanistan',
        data: [0.3, 0.1, 0.0, 0.2, 0.1]
    },
    {
        type: 'area',
        name: 'Sudan',
        data: [0.0, 0.2, 0.1, 0.0, 0.0]
    },
    {
        type: 'area',
        name: 'Denmark',
        data: [0.0, 0.2, 0.2, 0.0, 0.0]
    },
    {
        type: 'area',
        name: 'Nepal',
        data: [0.1, 0.0, 0.9, 0.0, 0.4]
    },
    ],
    credits: {
        enabled: false
    },
    scrollbar: {
        enabled: true
    },

        };

     return (
            <Box>
                 <div style={{ height: "400px", marginTop: '15px' }}>
                 <HighchartsReact 
                           containerProps={{ style: { height: "100%" } }}
                       highcharts={Highcharts}
                       options={options} 
                       value= {options}
                       />
        </Box>
            );
  }
reactjs highcharts responsive area-chart
© www.soinside.com 2019 - 2024. All rights reserved.