Highchart

---

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] }]
  };
}

---

Highcharts 주요 팁

문서 참조

• Highcharts 공식 문서에서 모든 설정과 API를 확인할 수 있습니다.

데이터를 동적으로 업데이트

let chart = Highcharts.chart('container', { series: [{ data: [1, 2, 3] }] });
chart.series[0].setData([4, 5, 6]); // 데이터 업데이트

JSON 데이터 사용

• AJAX 요청을 통해 서버에서 데이터를 받아와 차트를 업데이트할 수 있습니다:

fetch('data.json')
  .then(response => response.json())
  .then(data => {
    Highcharts.chart('container', {
      series: [{ data }]
    });
  });