Highcharts를 사용하여 온도계 차트를 만드는 방법

Highcharts는 온도계 차트를 포함한 다양한 아이콘을 만드는 데 사용할 수 있는 인기 있는 JavaScript 차트 라이브러리입니다. 이 기사에서는 Highcharts를 사용하여 간단한 온도계 차트를 만드는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

1. 준비

먼저 하이차트 공식 홈페이지(https://www.highcharts.com/download)에서 하이차트 라이브러리를 다운로드하고 해당 자바스크립트, CSS 파일을 웹페이지에 소개해야 합니다.

2. HTML 요소 만들기

다음으로 HTML 파일에 온도계 차트를 담을 div 요소를 만듭니다.

3. 온도계 차트 구성

온도계 차트를 만들려면 Highcharts를 제공해야 합니다. 일부 데이터 및 구성 옵션이 있습니다. 다음은 간단한 예입니다.

var options = {

chart: {

renderTo: 'container',

type: 'gauge',

plotBackgroundColor: null,

plotBackgroundImage: null,

plotBorderWidth: 0 ,

plotShadow: false

},

title: {

text: 'Temperature'

},

pane: {

startAngle: -150,

endAngle: 150,

ground: [
{
BackgroundColor: {

            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
            stops: [
                [0, '#FFF'],
                [1, '#333']
            ]
        },
        borderWidth: 0,
        outerRadius: '109%'
    },
    {
        backgroundColor: {
            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
            stops: [
                [0, '#333'],
                [1, '#FFF']
            ]
        },
        borderWidth: 1,
        outerRadius: '107%'
    },
    {
        // default background
    },
    {
        backgroundColor: '#DDD',
        borderWidth: 0,
        outerRadius: '105%',
        innerRadius: '103%'
    }
]

},

// 값 axis
yAxis: {

min: -20,
max: 40,

minorTickInterval: 'auto',
minorTickWidth: 1,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#666',

tickInterval: 10,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 12,
tickColor: '#666',
labels: {
    step: 2,
    rotation: 'auto'
},
title: {
    text: '°C'
},
plotBands: [{
    from: -20,
    to: 0,
    color: '#9CCC65' // green
}, {
    from: 0,
    to: 10,
    color: '#FFEB3B' // yellow
}, {
    from: 10,
    to: 20,
    color: '#FFC107' // orange
}, {
    from: 20,
    to: 30,
    color: '#FF5722' // red
}, {
    from: 30,
    to: 40,
    color: '#F44336' // dark red
}]

},

series: [{

name: 'Temperature',
data: [20],
tooltip: {
    valueSuffix: ' °C'
}

}]

};

가장 중요한 것은 페인입니다. 내부 및 외부 배경색, 테두리 너비 및 기타 스타일을 정의합니다. 그 중,plotBands는 온도 간격의 색상을 정의합니다. 다음 yAxis는 온도계의 눈금 및 기타 스타일을 정의하며 온도계의 초기 값은 시리즈로 설정됩니다.

4. 온도계 차트 렌더링

마지막으로 Highcharts의 Chart() 함수 및 옵션 개체를 호출하여 온도계 차트를 렌더링합니다.

varchart = new Highcharts.Chart(options);

전체 코드:

위 내용은 Highcharts를 사용하여 온도계 차트를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!