타임라인을 사용하여 Highcharts에 데이터 변경 사항을 표시하는 방법

데이터 시각화에서 타임라인은 자주 사용되는 구성요소 중 하나입니다. 데이터 변경 사항을 표시할 때 타임라인을 사용하면 데이터 변경 사항을 보다 직관적이고 이해하기 쉽게 만들 수 있습니다. Highcharts는 타임라인 지원을 포함하여 다양한 그래프 유형과 상호 작용 방법을 지원하는 매우 강력한 데이터 시각화 도구입니다.

이 글에서는 Highcharts에서 타임라인을 사용하여 데이터 변경 사항을 표시하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

1. 데이터 준비

먼저 표시할 데이터 세트를 준비해야 합니다. 이 기사에서는 1년 동안 도시의 일일 강수량을 예로 들어 데이터 형식은 다음과 같습니다.

[
  { date: '2021-01-01', value: 1.2 },
  { date: '2021-01-02', value: 0.9 },
  { date: '2021-01-03', value: 1.5 },
  //...
]

여기서 날짜 필드는 날짜를 나타내고 값 필드는 해당 날짜의 강우량을 나타냅니다.

2. 타임라인 만들기

Highcharts에서 타임라인은 xAxis 설정을 통해 구현됩니다. 유형을 'datetime'으로 설정하여 타임라인을 사용할 수 있습니다. 코드 예시는 다음과 같습니다.

Highcharts.chart('container', {
  chart: {
    type: 'spline'
  },
  xAxis: {
    type: 'datetime',
    title: {
      text: '日期'
    }
  },
  //...
})

이번 예시에서는 라인 차트를 생성하고 타임라인을 사용하기 위해 xAxis 유형을 datetime으로 설정했습니다. 동시에 xAxis의 제목은 'Date'로 설정됩니다.

3. 데이터 및 그래픽 구성

다음으로 데이터 및 그래픽을 구성해야 합니다. 이 글에서는 라인 차트를 예로 들어보겠습니다.

Highcharts.chart('container', {
  chart: {
    type: 'spline'
  },
  xAxis: {
    type: 'datetime',
    title: {
      text: '日期'
    }
  },
  yAxis: {
    title: {
      text: '降雨量(mm)'
    }
  },
  series: [{
    name: '降雨量',
    data: [
      [Date.UTC(2021, 0, 1), 1.2],
      [Date.UTC(2021, 0, 2), 0.9],
      [Date.UTC(2021, 0, 3), 1.5],
      // ...
    ]
  }]
})

예제에서는 타임라인이 xAxis를 통해 설정되고, y축의 제목은 yAxis를 통해 '강우량(mm)'으로 설정됩니다. 폴리라인은 시리즈의 데이터를 통해 설정됩니다. 그래프의 데이터는 Highcharts에 내장된 Date.UTC() 함수를 사용하여 날짜를 나타냅니다.

4. 타임라인 표시 개선

시간 형식, 표시 간격 설정 등 타임라인 표시를 더욱 개선할 수 있습니다. 다음은 개선된 코드 예입니다.

Highcharts.chart('container', {
  chart: {
    type: 'spline'
  },
  xAxis: {
    type: 'datetime',
    title: {
      text: '日期'
    },
    dateTimeLabelFormats: {
      day: '%e. %b'
    },
    tickInterval: 24 * 3600 * 1000 // 一天一个刻度
  },
  yAxis: {
    title: {
      text: '降雨量(mm)'
    }
  },
  series: [{
    name: '降雨量',
    data: [
      [Date.UTC(2021, 0, 1), 1.2],
      [Date.UTC(2021, 0, 2), 0.9],
      [Date.UTC(2021, 0, 3), 1.5],
      // ...
    ]
  }]
})

예제 코드에서 xAxis의 dateTimeLabelFormats 속성은 날짜의 표시 형식을 설정하는 데 사용됩니다. 여기서는 날짜와 월을 나타내는 '%e %b'입니다( 예: '1.1.'). 동시에, TickInterval 속성은 타임라인에서 일별 틱을 설정하는 데 사용됩니다.

이제 타임라인을 사용해 하이차트에 데이터를 표시하는 예제를 완성했습니다. Highcharts는 꺾은선형 차트 외에도 막대형 차트, 원형 차트 등 다양한 그래픽 유형도 지원합니다. 실제 필요에 따라 해당 그래픽 표시 방법을 선택할 수 있습니다.

위 내용은 타임라인을 사용하여 Highcharts에 데이터 변경 사항을 표시하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!