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

问题描述：

即时尝试呈现图表，任何图表，对于反应和打字稿项目中的“Highcharts”并不重要。如何在打字稿中使用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如何IM：

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

请，有人可以帮忙吗？也许给使用打字稿highcharts的工作示例和反应..

也许牛逼他的[主旨]（https://gist.github.com/jon-a-nygaard/7b9b8c164325f564a2e6464acf4271be）可以提供帮助。 –

我认为在这个要点中缺少文件。 – Benny67b

答

错误状态页面没有必要为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>

太棒了！非常感谢！ – Benny67b

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

相关推荐