가로선 차트를 사용하여 Highcharts에 데이터를 표시하는 방법

Highcharts는 데이터를 표시하기 위해 다양한 차트 유형을 지원하는 매우 인기 있는 JavaScript 차트 라이브러리입니다. 그 중 가로선 차트는 데이터에서 특정 값의 가로 위치를 표시하는 데 사용되는 일반적으로 사용되는 차트 유형입니다.

이 글에서는 Highcharts에서 가로선 차트를 사용하여 데이터를 표시하고 구체적인 코드 예제를 제공하는 방법을 소개합니다. 단계는 다음과 같습니다.

1단계: 데이터 준비

먼저 다음 데이터와 같은 데이터를 준비해야 합니다.

var data = [{
    name: 'Apple',
    value: 85
}, {
    name: 'Orange',
    value: 65
}, {
    name: 'Banana',
    value: 45
}, {
    name: 'Grape',
    value: 30
}, {
    name: 'Lemon',
    value: 15
}];

위 데이터에서 name은 수평선의 이름을 나타내고 value는 수평선의 이름을 나타냅니다. 수평선의 가치. 여기서는 필요에 따라 늘리거나 줄일 수 있는 5가지 유형의 수평선을 사용합니다.

2단계: 컨테이너 만들기

하이차트 차트를 배치할 HTML 컨테이너를 만듭니다. 예:

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

3단계: Highcharts 라이브러리 소개

Highcharts 라이브러리를 HTML 페이지에 소개합니다. 예:

<script src="https://cdn.jsdelivr.net/npm/highcharts@9.1.1/highcharts.js"></script>

4단계: 하이차트 구성 작성

수평선 차트의 제목, 데이터, x축, y축 등을 포함하여 JavaScript 파일에 하이차트 구성을 작성합니다. 수평선 차트의 유형은 xrange입니다. 구체적인 구성 코드는 다음과 같습니다.

Highcharts.chart('container', {
    chart: {
        type: 'xrange'
    },
    title: {
        text: 'Horizontal Line Chart'
    },
    xAxis: {
        categories: ['Value'],
    },
    yAxis: {
        title: {
            text: ''
        },
        reversed: true,
        maxPadding: 0.1,
        min: 0,
        max: 100,
    },
    legend: {
        enabled: false
    },
    series: [{
        name: 'Value',
        data: data,
        borderRadius: 5,
        borderColor: '#cccccc',
        borderWidth: 1,
        pointWidth: 20
    }]
});

위 구성에서 차트 유형은 xrange로 가로선 차트를 생성한다는 뜻입니다. title은 차트 제목을 나타내고, xAxis는 x축을 나타내며, 가로선 차트에는 x축이 하나만 있으므로 범주에 "값" 항목이 하나만 있습니다. yAxis는 y축을 나타내고, reversed는 가장 높은 값이 맨 위에 오도록 y축을 뒤집는 것을 나타냅니다. maxPadding은 y축 위와 아래에 남겨진 공간의 비율을 나타내며, min과 max는 최소값과 최대값을 나타냅니다. ​y축의. legend는 범례를 나타내므로 여기서는 필요하지 않으므로 false로 설정됩니다. series는 데이터 시리즈를 나타내며, name은 데이터 시리즈의 이름, data는 데이터, borderRadius는 테두리 필렛 반경, borderColor는 테두리 색상, borderWidth는 테두리 너비, pointWidth는 수평선의 너비를 나타냅니다.

5단계: 차트 표시

마지막으로 HTML 페이지에서 Highcharts 구성을 호출하고 컨테이너에 차트를 표시합니다.

Highcharts.chart('container', options);

전체 코드는 다음과 같습니다.

    
    <script src="https://cdn.jsdelivr.net/npm/highcharts@9.1.1/highcharts.js"></script>


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

    <script>
        var data = [{
            name: 'Apple',
            value: 85
        }, {
            name: 'Orange',
            value: 65
        }, {
            name: 'Banana',
            value: 45
        }, {
            name: 'Grape',
            value: 30
        }, {
            name: 'Lemon',
            value: 15
        }];

        var options = {
            chart: {
                type: 'xrange'
            },
            title: {
                text: 'Horizontal Line Chart'
            },
            xAxis: {
                categories: ['Value']
            },
            yAxis: {
                title: {
                    text: ''
                },
                reversed: true,
                maxPadding: 0.1,
                min: 0,
                max: 100
            },
            legend: {
                enabled: false
            },
            series: [{
                name: 'Value',
                data: data,
                borderRadius: 5,
                borderColor: '#cccccc',
                borderWidth: 1,
                pointWidth: 20
            }]
        };

        Highcharts.chart('container', options);
    </script>

위는 Highcharts에서 가로선 차트를 사용하여 데이터를 표시하는 모든 단계입니다. 도움이 되었으면 좋겠습니다.

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