如何在打字稿中使用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的工作示例和反應..

來源

2017-10-08 Benny67b

也許牛逼他的[主旨]（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>

來源

2017-10-08 16:12:20

太棒了！非常感謝！ – Benny67b

如何在打字稿中使用Highcharts並作出反應

回答

相關問題