> 웹 프론트엔드 > JS 튜토리얼 > Highcharts를 사용하여 온도계 차트를 만드는 방법

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

WBOY
풀어 주다: 2023-12-18 17:53:05
원래의
943명이 탐색했습니다.

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

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

  1. 준비

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

  1. HTML 요소 만들기

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

  1. 온도계 차트 구성

온도계 차트를 만들려면 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는 온도계의 눈금 및 기타 스타일을 정의하며 온도계의 초기 값은 시리즈로 설정됩니다.

  1. 온도계 차트 렌더링

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

varchart = new Highcharts.Chart(options);

전체 코드:

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

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿