如何在打字稿中使用Highcharts并做出反应 [英] How to use Highcharts in typescript and react
本文介绍了如何在打字稿中使用Highcharts并做出反应的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图呈现一个图表，任何一个图表，与在反应和打字稿项目中带有"Highcharts"的哪个图表都没有关系.
im trying to render a chart, any chart, doesnt matters which one, with "Highcharts" in a react and typescript project.
这是index.html中的脚本源:
This is the script source in 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>
这是即时通讯使用highcharts的方式:
This is how im using highcharts:
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>
)
}
}
我收到此错误:
请，有人可以帮忙吗? 也许会给出一个使用打字稿和反应的高图表的工作示例.
Please, some one can help? Maybe give a working example of highcharts using typescript and react..
推荐答案
错误状态页面中已定义的高级图表，不需要用于高级图表的脚本标签，请使用npm中的highcharts模块
error states Highcharts already defined in the page no need for script tag for highcharts, use highcharts modules from npm
实时查看此演示
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>
)
}
}
html
<div id="main" style="width:100%;height:100%"></div>
这篇关于如何在打字稿中使用Highcharts并做出反应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
