Highcharts를 React, Vue, Angular에서 사용

React 환경에서 highchart 사용

• 설치

npm install highcharts highcharts-react-official

import React from 'react';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';

const options = {
  chart: { type: 'line' },
  title: { text: 'React Highcharts Example' },
  series: [{ data: [1, 2, 3, 4, 5] }]
};

const App = () => <HighchartsReact highcharts={Highcharts} options={options} />;
export default App;

Vue 환경에서 사용

• 설치:

npm install highcharts highcharts-vue

<template>
  <highcharts :options="chartOptions"></highcharts>
</template>

<script>
import Highcharts from 'highcharts';
import HighchartsVue from 'highcharts-vue';

export default {
  name: 'App',
  data() {
    return {
      chartOptions: {
        chart: { type: 'bar' },
        title: { text: 'Vue Highcharts Example' },
        series: [{ data: [1, 3, 2, 4] }]
      }
    };
  }
};
</script>

Angular 환경에서 사용

• 설치:

npm install highcharts-angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<highcharts-chart 
               [Highcharts]="Highcharts"
               [options]="chartOptions"
               style="width: 100%; height: 400px;"></highcharts-chart>`
})
export class AppComponent {
  Highcharts = Highcharts;
  chartOptions = {
    chart: { type: 'line' },
    title: { text: 'Angular Highcharts Example' },
    series: [{ data: [1, 2, 3, 4, 5] }]
  };
}