Highcharts는 온도계 차트를 포함한 다양한 아이콘을 만드는 데 사용할 수 있는 인기 있는 JavaScript 차트 라이브러리입니다. 이 기사에서는 Highcharts를 사용하여 간단한 온도계 차트를 만드는 방법을 소개하고 구체적인 코드 예제를 제공합니다.
먼저 하이차트 공식 홈페이지(https://www.highcharts.com/download)에서 하이차트 라이브러리를 다운로드하고 해당 자바스크립트, CSS 파일을 웹페이지에 소개해야 합니다.
다음으로 HTML 파일에 온도계 차트를 담을 div 요소를 만듭니다.
온도계 차트를 만들려면 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는 온도계의 눈금 및 기타 스타일을 정의하며 온도계의 초기 값은 시리즈로 설정됩니다.
마지막으로 Highcharts의 Chart() 함수 및 옵션 개체를 호출하여 온도계 차트를 렌더링합니다.
varchart = new Highcharts.Chart(options);
전체 코드:
위 내용은 Highcharts를 사용하여 온도계 차트를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!