누적 차트를 사용하여 Highcharts에 데이터를 표시하는 방법-JS 튜토리얼-php.cn

누적 차트를 사용하여 Highcharts에 데이터를 표시하는 방법

WBOY

풀어 주다： 2023-12-18 17:56:46

원래의

645명이 탐색했습니다.

누적 차트를 사용하여 Highcharts에 데이터를 표시하는 방법

누적 차트는 데이터 시각화의 일반적인 방법으로, 여러 데이터 시리즈의 합계를 동시에 표시하고 각 데이터 시리즈의 합계를 형식으로 표시할 수 있습니다. 막대 차트가 기여합니다. Highcharts는 다양한 데이터 시각화 요구 사항을 충족하기 위해 다양한 차트와 유연한 구성 옵션을 제공하는 강력한 JavaScript 라이브러리입니다. 이 글에서는 Highcharts를 사용하여 누적 차트를 만드는 방법을 소개하고 해당 코드 예제를 제공합니다.

먼저 Highcharts 라이브러리 파일을 소개해야 합니다. HTML 페이지의

태그에 다음 코드를 추가하세요.

<script src="https://code.highcharts.com/highcharts.js"></script>

로그인 후 복사

그런 다음 태그 안에 컨테이너를 만들어 차트를 호스팅하세요.

요소를 사용하고 "chart-container"와 같은 고유 ID를 부여할 수 있습니다. 코드는 다음과 같습니다.

<div id="chart-container"></div>

로그인 후 복사

다음으로 JavaScript 코드를 사용하여 차트를 구성하고 렌더링할 수 있습니다. 누적 차트를 생성하려면 Highcharts의 Stacking 속성을 사용하여 "normal"로 설정해야 합니다. 동시에 데이터 시리즈의 이름, 데이터, 스택 방법도 지정해야 합니다. 코드는 다음과 같습니다.

Highcharts.chart('chart-container', {
    chart: {
        type: 'bar'
    },
    title: {
        text: '堆叠图表示例'
    },
    xAxis: {
        categories: ['一月', '二月', '三月', '四月', '五月']
    },
    yAxis: {
        min: 0,
        title: {
            text: '数值'
        }
    },
    legend: {
        reversed: true
    },
    plotOptions: {
        series: {
            stacking: 'normal'
        }
    },
    series: [{
        name: '系列一',
        data: [5, 3, 4, 7, 2]
    }, {
        name: '系列二',
        data: [2, 2, 3, 2, 1]
    }, {
        name: '系列三',
        data: [3, 4, 4, 2, 5]
    }]
});

로그인 후 복사

위 코드에서는 막대 차트(유형: 'bar')를 생성하고 제목을 "Stacked Chart example"로 설정합니다. x축의 항목은 월, y축은 숫자 값을 나타냅니다. 범례의 reverse 속성을 true로 설정하여 데이터 시리즈가 누적된 순서로 표시되도록 합니다. plotOptions의 stacking 속성이 'normal'로 설정되어 있는데, 이는 데이터 계열이 쌓인 방식으로 표시된다는 의미입니다. 마지막으로 series 속성을 통해 이름과 해당 데이터를 포함하는 세 가지 데이터 시리즈를 지정합니다.

마지막으로, 페이지가 로드될 때 누적 차트가 렌더링되도록 페이지에 이 JavaScript 코드를 배치하기만 하면 됩니다. 완료되면 여러 데이터 시리즈의 합계와 개별 기여도를 시각적으로 표시하는 누적 차트가 있는 페이지가 생성됩니다.

위는 누적 차트를 사용하여 Highcharts에서 데이터를 표시하는 방법에 대한 구체적인 방법 및 코드 예제입니다. 간단한 구성과 코딩을 통해 매력적이고 이해하기 쉬운 누적 차트를 쉽게 만들어 데이터를 더 잘 표시하고 분석하고 더 많은 정보에 입각한 결정을 내리는 데 도움을 줄 수 있습니다.

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