highcharts 基本組成

  最近一個項目，用到了圖表，找了不少，發現Highcharts 這個純js的圖表插件很是好用，功能強大。作個筆記，備用。

 

基本構成，見圖：

 

在上圖中，顯示了作圖表時最常配置的幾個項目：

 

xAxis	X座標
yAxis	y座標
Credits	版權信息
legend	圖例
exporting	導出選項
Title	標題
tooltip	tip提示
Series	圖表上一個或多個數據系列，好比圖表中的一條曲線，一個柱形

 

圖表類型

英文名	中文名
line	直線圖
spline	曲線圖
area	面積圖
areaspline	曲線面積圖
arearange	面積範圍圖
areasplinerange	曲線面積範圍圖
column	柱狀圖
columnrange	柱狀範圍圖
bar	條形圖
pie	餅圖
scatter	散點圖
boxplot	箱線圖
bubble	氣泡圖
errorbar	偏差線圖
funnel	漏斗圖
gauge	儀表圖
waterfall	瀑布圖
polar	雷達圖
pyramid	金字塔

 經常使用的圖表類型大概是：line，pie，bar，column幾種了。

 

配置基本代碼：

var chart = new Highcharts.Chart({
chart: {},  //圖表全局選項

title: {},

subtitle: {},
xAxis: {}, //x座標
yAxis: {},//y座標

tooltip: {},//tip提示
plotOptions: { },// 圖表區域的設置
legend: {},//圖例
credits: {},//版權商標
series: [{}] // 圖表數據列

});