2025년 5월 19일 (월) 21:47에 Devcafe님의 편집

2025-05-19T21:47:57Z

Devcafe: 새 문서: === 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 = () =>
2024-11-27T11:54:16Z

새 문서: === React 환경에서 highchart 사용 === * 설치 <source lang=python> npm install highcharts highcharts-react-official </source> <source lang=python> 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={opti...

새 문서
=== React 환경에서 highchart 사용 ===
* 설치
<source lang=python>
npm install highcharts highcharts-react-official
</source>

<source lang=python>
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;
</source>

=== Vue 환경에서 사용 ===
* 설치:
<source lang=python>
npm install highcharts highcharts-vue
</source>

<source lang=html>
<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>
</source>

=== Angular 환경에서 사용 ===
* 설치:
<source lang=python>
npm install highcharts-angular
</source>

<source lang=python>
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] }]
};
}
</source>