最佳答案
Highcharts 是一個功能富強的 JavaScript 圖表庫，它容許用戶創建各品種型的圖表，如柱狀圖、折線圖、餅圖等，以便於數據可視化。經由過程 Highcharts，你可能輕鬆地將複雜的數據轉化為直不雅、易懂得的圖表。本文將帶你從入門到粗通，經由過程精選實例代碼，讓你疾速控制 Highcharts。
第一章：Highcharts 簡介
1.1 Highcharts 的特點
- 豐富的圖表範例：供給多種圖表範例，如柱狀圖、折線圖、餅圖、散點圖等。
- 高度定製：容許用戶自定義圖表的各個方面，包含色彩、字體、線條等。
- 呼應式計劃：支撐多種設備跟屏幕尺寸，供給精良的用戶休會。
- 跨平台：在 PC、平板電腦跟手機等設備上都能精良運轉。
1.2 Highcharts 的安裝
起首，你須要從 Highcharts 官網下載庫文件，並將其包含在你的 HTML 文件中。
<script src="https://code.highcharts.com/highcharts.js"></script>
第二章：基本實例
2.1 簡單柱狀圖
以下是一個簡單的柱狀圖實例：
<!DOCTYPE html>
<html>
<head>
<title>Highcharts 簡單柱狀圖</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="height: 400px; min-width: 310px"></div>
<script type="text/javascript">
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: '柱狀圖示例'
},
xAxis: {
categories: ['蘋果', '噴鼻蕉', '橙子']
},
yAxis: {
title: {
text: '數量'
}
},
series: [{
name: '生果',
data: [1, 2, 3]
}]
});
</script>
</body>
</html>
2.2 折線圖
以下是一個折線圖實例：
<!DOCTYPE html>
<html>
<head>
<title>Highcharts 折線圖</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="height: 400px; min-width: 310px"></div>
<script type="text/javascript">
Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: '折線圖示例'
},
xAxis: {
categories: ['一月', '二月', '三月', '四月', '蒲月']
},
yAxis: {
title: {
text: '溫度'
}
},
series: [{
name: '溫度',
data: [7.0, 6.9, 9.5, 14.5, 18.2]
}]
});
</script>
</body>
</html>
第三章：高等實例
3.1 3D 餅圖
以下是一個 3D 餅圖實例：
<!DOCTYPE html>
<html>
<head>
<title>Highcharts 3D 餅圖</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/highcharts-3d.js"></script>
</head>
<body>
<div id="container" style="height: 400px; min-width: 310px"></div>
<script type="text/javascript">
Highcharts.chart('container', {
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 45
}
},
title: {
text: '3D 餅圖示例'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
innerSize: 100,
depth: 45
}
},
series: [{
name: '生果',
data: [
{name: '蘋果', y: 29.9},
{name: '噴鼻蕉', y: 71.5},
{name: '橙子', y: 100},
{name: '葡萄', y: 49.9},
{name: '櫻桃', y: 38.2},
{name: '梨', y: 17.0}
]
}]
});
</script>
</body>
</html>
3.2 靜態更新數據
以下是一個靜態更新數據的實例：
<!DOCTYPE html>
<html>
<head>
<title>Highcharts 靜態更新數據</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="height: 400px; min-width: 310px"></div>
<script type="text/javascript">
var chart = Highcharts.chart('container', {
chart: {
type: 'line',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 130
},
title: {
text: '靜態更新數據'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
title: {
text: '溫度'
}
},
series: [{
name: '溫度',
data: (function () {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i += 1) {
time += 3600000; // add one hour
data.push([
time,
Math.round(Math.random() * 100)
]);
}
return data;
}())
}],
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
this.y + '°C';
}
},
legend: {
enabled: false
},
credits: {
enabled: false
}
});
// add random data
setInterval(function () {
var x = (new Date()).getTime();
var y = Math.round(Math.random() * 100);
var series = chart.series[0];
var point = series.data[series.data.length - 1];
point.update(x, y);
}, 1000);
</script>
</body>
</html>
第四章：總結
經由過程本文的介紹，信賴你曾經對 Highcharts 有了一定的懂得。Highcharts 是一個功能富強的圖表庫，可能幫助你輕鬆實現數據可視化。經由過程以上實例，你可能進修到怎樣創建各品種型的圖表，以及怎樣停止高等定製。盼望本文能幫助你疾速入門，並在現實項目中應用 Highcharts。