我正在尝试渲染图表，任何图表，无论是哪个图表，在 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>
这就是我使用 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>
)
}
}
我收到这个错误:
拜托，有人可以帮忙吗？ 也许使用 typescript 和 react 给出一个 highcharts 的工作示例..
最佳答案
错误状态 Highcharts 已经在页面中定义 highcharts 不需要脚本标签，使用 npm 的 highcharts 模块
实时查看demo
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>
关于reactjs - 如何在 typescript 中使用 Highcharts 并使用react，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46629013/