Reactjs 如何在typescript和react中使用Highcharts_Reactjs_Typescript_Highcharts

Reactjs 如何在typescript和react中使用Highcharts

reactjs typescript highcharts

Reactjs 如何在typescript和react中使用Highcharts,reactjs,typescript,highcharts,Reactjs,Typescript,Highcharts,我试图呈现一个图表，任何图表，不管是哪一个，在react和typescript项目中使用“Highcharts” 这是index.html中的脚本源： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"/> **<script src="https://code

我试图呈现一个图表，任何图表，不管是哪一个，在react和typescript项目中使用“Highcharts”

这是index.html中的脚本源：

 <!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
        **<script src="https://code.highcharts.com/highcharts.src.js"></script>**
    </head>
    <body>
        <div id="main" style="width:100%;height:100%"></div>
        <!-- Main -->
          <!-- Main -->
    </body>
</html>


****

这就是我使用海图的方式：

import * as React from "react";
import * as ReactDOM from "react-dom";
import * as Highcharts from "highcharts";

let myChart = Highcharts.chart("main",{
    chart: {
    type: 'bar'
    },
    title: {
    text: 'Fruit Consumption'
    },
    xAxis: {
    categories: ['Apples', 'Bananas', 'Oranges']
    },
    yAxis: {
    title: {
    text: 'Fruit eaten'
    }
    },
    series: [{
    name: 'Jane',
    data: [1, 0, 4]
    }, {
    name: 'John',
    data: [5, 7, 3]
    }]
    });

export default class Home extends React.Component<any, any> {

        render() {
            return (
                <div>
                    {myChart}
                </div>
            )
        }
}

import*as React from“React”；
从“react dom”导入*作为react dom；
从“Highcharts”导入*作为Highcharts；
让myChart=Highcharts.chart（“main”{
图表：{
类型：'bar'
},
标题：{
正文：“水果消费”
},
xAxis：{
类别：[‘苹果’、‘香蕉’、‘橙子’]
},
亚克斯：{
标题：{
文字：“吃水果”
}
},
系列：[{
姓名：'简'，
数据：[1,0,4]
}, {
姓名：'约翰'，
数据：[5,7,3]
}]
});
导出默认类Home扩展React.Component
拜托，有人能帮忙吗？
可能会给出一个使用typescript和react的highcharts的工作示例。
错误状态页面中已定义的highcharts不需要highcharts的脚本标记，请使用npm的highcharts模块
现场检查
import*as React from“React”；
从“react dom”导入*作为react dom；
从“Highcharts”导入*作为Highcharts；
让myChart=Highcharts.chart（“main”{
图表：{
类型：'bar'
},
标题：{
正文：“水果消费”
},
xAxis：{
类别：[‘苹果’、‘香蕉’、‘橙子’]
},
亚克斯：{
标题：{
文字：“吃水果”
}
},
系列：[{
姓名：'简'，
数据：[1,0,4]
}, {
姓名：'约翰'，
数据：[5,7,3]
}]
});
导出默认类Home扩展React.Component{
render（）{
返回(
{myChart}
)
}
}

html
也许这会有所帮助。我想这本要点中缺少一些文件。
import * as React from "react";
import * as ReactDOM from "react-dom";
import * as Highcharts from "highcharts";

let myChart = Highcharts.chart("main",{
    chart: {
    type: 'bar'
    },
    title: {
    text: 'Fruit Consumption'
    },
    xAxis: {
    categories: ['Apples', 'Bananas', 'Oranges']
    },
    yAxis: {
    title: {
    text: 'Fruit eaten'
    }
    },
    series: [{
    name: 'Jane',
    data: [1, 0, 4]
    }, {
    name: 'John',
    data: [5, 7, 3]
    }]
    });

export default class Home extends React.Component<any, any> {

        render() {
            return (
                <div>
                    {myChart}
                </div>
            )
        }
}

 <div id="main" style="width:100%;height:100%"></div>