그래프그리기 - Apexcharts

감정인식의 결과를 나타내는 그래프를 나타내야 한다.

 

회의록별 부정적인 발언과 말의 빠르기를 나타내어 변화 추이를 알 수 있게 하려고 한다.

 

npm 설치

> npm install apexcharts
> npm install react-apexcharts

 

import 하기

import ApexChart from 'react-apexcharts'

 

 

//데이터 설정
const series = [{
        name: "공격&혐오 발언",
        data: [10, 41, 35, 51, 49]
      },
      {
        name: "발화 속도",
        data: [1, 4, 15, 41, 69]
      }];

    const options= {
        chart: {
          height: 350,
          type: 'line',
          zoom: {
            enabled: false
          }
        },
        dataLabels: {
          enabled: false
        },
        stroke: {
          curve: 'straight'
        },
        title: {
          text: '회의 변화도',
          align: 'left'
        },
        grid: {
          row: {
            colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
            opacity: 0.5
          },
        },
        xaxis: {
          categories: ['05-13', '05-14', '05-15', '05-16', '05-17'],
        }
      }
      
      
      <ApexChart options={options} series={series} type="line"  height={500} width={800} />

option과 series를 조정하여 차트를 설정한다.