타이프 스크립트에서 하이 차트를 사용하고 반응하는 방법

메신저를 렌더링하려고 시도하는 중, 어떤 차트가 반응 및 타이피 스크립트 프로젝트에서 "하이 차트"로 중요하지 않습니다. highcharts를 사용하는 방법 메신저타이프 스크립트에서 하이 차트를 사용하고 반응하는 방법

<!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>

이는 다음과 같습니다 :

이

은 index.html을에서 스크립트 소스입니다

Highcharts Error

하십시오

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> 
      ) 
     } 
}

임이 오류가 , 도움을 줄 수있는 사람이 있습니까? 아마, NPM에서 사용 highcharts 모듈은

확인

출처

2017-10-08 Benny67b

어쩌면 t 그의 [요점] (https://gist.github.com/jon-a-nygaard/7b9b8c164325f564a2e6464acf4271be)이 도움이 될 수 있습니다. –

이 요점에 파일이 누락되었다고 생각합니다. – Benny67b

오류 상태를 .. 이미 페이지 highcharts에 대한 스크립트 태그에 대한 필요성에 정의 Highcharts를 타이프 라이터를 사용 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

타이프 스크립트에서 하이 차트를 사용하고 반응하는 방법

답변

관련 문제