Highcharts是一個流行的JavaScript庫，用於構建互動式數據可視化圖表。它能夠幫助我們以簡單的方式將數據轉換為漂亮的圖表，並且可以在Web應用程序中輕鬆嵌入。本文將探討使用Highcharts構建互動式數據可視化的不同方面。
一、Highcharts的基本使用
Highcharts是一個開源的JavaScript圖表庫，可以在瀏覽器中使用和呈現美麗的互動式圖表。使用Highcharts最重要的部分是創建圖表實例、設置數據和選項，然後呈現圖表。以下是Highcharts創建基本圖表的示例代碼：
// 創建圖表
var chart = Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Monthly Revenue'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Revenue'
}
},
series: [{
name: 'Sales',
data: [10000, 12000, 13000, 14000, 15000, 16000, 17000, 18000, 19000, 20000, 21000, 22000]
}]
});
在這個例子中，我們創建了一個柱形圖實例，並使用數據填充了圖表。
二、Highcharts的互動式特性
Highcharts不僅可以呈現靜態圖表，還可以創建互動式圖表。使用Highcharts的互動式特性能夠讓用戶以不同的方式與圖表交互，包括縮放、控制數據集合、繪製據點信息等。以下是Highcharts的互動式特性的一些示例：
1.縮放圖表
chart: {
zoomType: 'x'
}
2.顯示數據集合
legend: {
enabled: true
}
3.繪製據點信息
plotOptions: {
series: {
point: {
events: {
click: function () {
alert(this.category + ': ' + this.y);
}
}
}
}
}
三、Highcharts的圖表類型
Highcharts支持多種不同類型的圖表，以適應不同類型的數據集合。以下是一些常見的Highcharts圖表類型：
1.餅圖
var chart = Highcharts.chart('container', {
chart: {
type: 'pie'
},
title: {
text: 'Browser market shares in January, 2018'
},
series: [{
name: 'Browser',
data: [
['Firefox', 10],
['IE', 56],
['Chrome', 24],
['Safari', 5],
['Opera', 2]
]
}]
});
2.柱形圖
var chart = Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Monthly Revenue'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Revenue'
}
},
series: [{
name: 'Sales',
data: [10000, 12000, 13000, 14000, 15000, 16000, 17000, 18000, 19000, 20000, 21000, 22000]
}]
});
3.線圖
var chart = Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'Monthly Revenue'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Revenue'
}
},
series: [{
name: 'Sales',
data: [10000, 12000, 13000, 14000, 15000, 16000, 17000, 18000, 19000, 20000, 21000, 22000]
}]
});
4.散點圖
var chart = Highcharts.chart('container', {
chart: {
type: 'scatter',
zoomType: 'xy'
},
title: {
text: 'Height vs Weight'
},
xAxis: {
title: {
text: 'Height (cm)'
},
startOnTick: true,
endOnTick: true,
showLastLabel: true
},
yAxis: {
title: {
text: 'Weight (kg)'
}
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
borderWidth: 1
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
},
}
},
series: [{
name: 'Male',
color: 'rgba(119, 152, 191, .5)',
data: [
[161.2, 51.6],
[167.5, 59.0],
[159.5, 49.2],
[157.0, 63.0],
[155.8, 53.6],
[170.0, 59.0],
[159.1, 47.6],
[166.0, 69.8],
[176.2, 66.8],
[160.2, 75.2],
[172.5, 55.2],
[170.9, 54.2],
[172.9, 62.5],
[153.4, 42.0],
[160.0, 50.0],
[147.2, 49.8],
[168.2, 49.2],
[175.0, 73.2],
[157.0, 47.8],
[167.6, 68.8],
[159.5, 50.6],
[175.0, 82.5],
[166.8, 57.2],
[176.5, 87.8],
[170.2, 72.8],
[174.0, 54.5],
[173.0, 59.8],
[179.9, 67.3],
[170.5, 67.8],
[160.0, 47.0],
[154.4, 46.2],
[162.0, 55.0],
[176.5, 83.0],
[160.0, 54.4],
[152.0, 45.8],
[162.1, 53.6],
[170.0, 73.2],
[160.2, 52.1],
[161.3, 67.9],
[166.4, 56.6],
[168.9, 62.3],
[163.8, 58.5],
[167.6, 54.5],
[160.0, 50.2],
[161.3, 60.3],
[167.6, 58.3],
[165.1, 56.2],
[160.0, 50.2],
[170.0, 72.9],
[157.5, 59.8],
[167.6, 61.0],
[160.7, 69.1],
[163.2, 55.9],
[152.4, 46.5],
[157.5, 54.3],
[168.3, 54.8],
[180.3, 60.7],
[165.5, 60.0],
[165.0, 62.0],
[164.5, 60.3],
[156.0, 52.7],
[160.0, 74.3],
[163.0, 62.0],
[165.7, 73.1],
[161.0, 80.0],
[162.0, 54.7],
[166.0, 53.2],
[174.0, 75.7],
[172.7, 61.1],
[167.6, 55.7],
[151.1, 48.7],
[164.5, 52.3],
[163.5, 50.0],
[152.0, 59.3],
[169.0, 62.5],
[164.0, 55.7],
[161.2, 54.8],
[155.0, 45.9],
[170.0, 70.6],
[176.2, 67.2],
[170.0, 69.4],
[162.5, 58.2],
[170.3, 64.8],
[164.1, 71.6],
[169.5, 52.8],
[163.2, 59.8],
[154.5, 49.0],
[159.8, 50.0],
[173.2, 69.2],
[170.0, 55.9],
[161.4, 63.4],
[169.0, 58.2],
[166.2, 58.6],
[159.4, 45.7],
[162.5, 52.2],
[159.0, 48.6],
[162.8, 57.8],
[159.0, 55.6],
[179.8, 66.8],
[162.9, 59.4],
[161.0, 53.6],
[151.1, 73.2],
[168.2, 53.4],
[168.9, 69.0],
[173.2, 58.4],
[171.8, 56.2],
[178.0, 70.6],
[164.3, 59.8],
[163.0, 72.0],
[168.5, 65.2],
[166.8, 56.6],
[172.7, 105.2],
[163.5, 51.8],
[169.4, 63.4],
[167.8, 59.0],
[159.5, 47.6],
[167.6, 63.0],
[161.2, 55.2],
[160.0, 45.0],
[163.2, 54.0],
[162.2, 50.2],
[161.3, 60.2],
[149.5, 44.8],
[157.5, 58.8],
[163.2, 56.4],
[172.7, 62.0],
[155.0, 49.2],
[156.5, 67.2],
[164.0, 53.8],
[160.9, 54.4],
[162.8, 58.0],
[167.0, 59.8],
[160.0, 54.8],
[160.0, 43.2],
[168.9, 60.5],
[158.2, 46.4],
[156.0, 64.4],
[160.0, 48.8],
[167.1, 62.2],
[158.0, 55.5],
[167.6, 57.8],
[156.0, 54.6],
[162.1, 59.2],
[173.4, 52.7],
[159.8, 53.2],
[170.5, 64.5],
[159.2, 51.8],
[157.5, 56.0],
[161.3, 63.6],
[162.6, 63.2],
[160.0, 59.5],
[168.9, 56.8],原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/181544.html
微信掃一掃 
支付寶掃一掃 