Question

即时尝试渲染图表，任何图表都不重要，在反应和打字稿项目中使用“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>
            )
        }
}

我收到此错误：

Highcharts Error

请有人帮忙吗？也许使用打字稿给出一个高级图表的工作示例并做出反应..

Answer 1

错误状态已在页面中定义的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>

如何在打字稿中使用Highcharts并做出反应

1 个答案: