JavaScript圖表插件highcharts詳解
一、Highcharts
- 官網(wǎng): https://www.highcharts.com.cn/index.php
- 下載頁面:https://www.highcharts.com.cn/download
- 演示地址:https://www.highcharts.com.cn/demo/highcharts
- 中文文檔:https://www.highcharts.com.cn/docs
Highcharts 非商業(yè)免費(fèi),商業(yè)需授權(quán),代碼開源。兼容 IE6。
Highcharts 底層為svg,方便自己定制,但圖表類型有限。
svg特點(diǎn):
- 不依賴分辨率。
- 支持事件處理器,可以為某個(gè)元素附加JS事件處理器。
- 最適合帶有大型渲染區(qū)域的應(yīng)用程序(如谷歌地圖),但復(fù)雜度高會(huì)減慢渲染速度(任何過度使用DOM的應(yīng)用都不快)。
- 不適合游戲應(yīng)用。
Highcharts 是一個(gè)用純 JavaScript 編寫的一個(gè)圖表庫(kù), 能夠很簡(jiǎn)單便捷的在 Web 網(wǎng)站或是 Web 應(yīng)用程序添加有交互性的圖表,并且免費(fèi)提供給個(gè)人學(xué)習(xí)、個(gè)人網(wǎng)站和非商業(yè)用途使用。
Highcharts 支持的圖表類型有直線圖、曲線圖、區(qū)域圖、柱狀圖、餅狀圖、散狀點(diǎn)圖、儀表圖、氣泡圖、瀑布流圖等多達(dá) 20 種圖表,其中很多圖表可以集成在同一個(gè)圖形中形成混合圖。
訪問 highcharts.com 下載 Highcharts 包。
二、1 分鐘上手 Highcharts
引入 Highcharts
Highcharts 最基本的運(yùn)行只需要一個(gè) JS 文件,即 highcharts.js,以使用 CDN 文件為例,對(duì)應(yīng)的代碼是:
<script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
創(chuàng)建一個(gè)簡(jiǎn)單的圖表
在繪圖前我們需要為 Highcharts 準(zhǔn)備一個(gè) DOM 容器,并指定其大小
<div id="container" style="width: 600px;height:400px;"></div>
然后通過 Highcharts 的初始化函數(shù) Highcharts.chart
來創(chuàng)建圖表,該函數(shù)接受兩個(gè)參數(shù),第一個(gè)參數(shù)是 DOM 容器的 Id,第二個(gè)參數(shù)是圖表配置,代碼如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>第一個(gè) Highcharts 圖表</title> </head> <body> 圖表容器 DOM <div id="container" style="width: 600px;height:400px;"></div> 引入 highcharts.js <script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script> <script> // 圖表配置 var options = { chart: { type: 'bar' //指定圖表的類型,默認(rèn)是折線圖(line) }, title: { text: '我的第一個(gè)圖表' // 標(biāo)題 }, xAxis: { categories: ['蘋果', '香蕉', '橙子'] // x 軸分類 }, yAxis: { title: { text: '吃水果個(gè)數(shù)' // y 軸標(biāo)題 } }, series: [{ // 數(shù)據(jù)列 name: '小明', // 數(shù)據(jù)列名 data: [1, 0, 4] // 數(shù)據(jù) }, { name: '小紅', data: [5, 7, 3] }] }; // 圖表初始化函數(shù) var chart = Highcharts.chart('container', options); </script> </body> </html>
這樣你的第一個(gè)圖表就誕生了!
1、調(diào)用遠(yuǎn)程數(shù)據(jù)
通過這個(gè)簡(jiǎn)單的例子,我們將學(xué)會(huì)如何配置基本的參數(shù)(options),然后通過一個(gè)Ajax調(diào)用遠(yuǎn)程數(shù)據(jù)以及解析數(shù)據(jù),最后通過合適的格式展現(xiàn)出來
一個(gè)外部的僅包含數(shù)據(jù)的CSV文件'data.csv'(數(shù)據(jù)源)。
Categories,Apples,Pears,Oranges,Bananas
John,8,4,6,5
Jane,3,4,2,3
Joe,86,76,79,77
Janet,3,16,13,15
var options = { chart: { renderTo: 'container', defaultSeriesType: 'column' }, title: { text: 'Fruit Consumption' }, xAxis: { categories: [] }, yAxis: { title: { text: 'Units' } }, series: [] }; $.get('data.csv', function(data) { // Split the lines var lines = data.split('\n'); // Iterate over the lines and add categories or series $.each(lines, function(lineNo, line) { var items = line.split(','); // header line containes categories if (lineNo == 0) { $.each(items, function(itemNo, item) { if (itemNo > 0) options.xAxis.categories.push(item); }); } // the rest of the lines contain data with their name in the first position else { var series = { data: [] }; $.each(items, function(itemNo, item) { if (itemNo == 0) { series.name = item; } else { series.data.push(parseFloat(item)); } }); options.series.push(series); } }); // Create the chart var chart = new Highcharts.Chart(options); });
2、使用JQuery結(jié)合HIghcharts實(shí)現(xiàn)從后臺(tái)獲取JSON實(shí)時(shí)刷新圖表
$(function(){ //聲明報(bào)表對(duì)象 var chart = new Highcharts.Chart({ chart: { //將報(bào)表對(duì)象渲染到層上 renderTo: 'container' }, //設(shè)定報(bào)表對(duì)象的初始數(shù)據(jù) series: [{ data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] }] }); function getForm(){ //使用JQuery從后臺(tái)獲取JSON格式的數(shù)據(jù) jQuery.getJSON('http://localhost:8080/JQueryPIC/ajax', null, function(data) { //為圖表設(shè)置值 chart.series[0].setData(data); }); } $(document).ready(function() { //每隔3秒自動(dòng)調(diào)用方法,實(shí)現(xiàn)圖表的實(shí)時(shí)更新 window.setInterval(getForm,3000); }); });
3、活動(dòng)圖(Live Charts)
建立服務(wù)器。在這個(gè)例子中,我們服務(wù)器腳本語言返回包含時(shí)間(time)以及y值(y value)的javascript數(shù)組。
var chart; // global /** * Request data from the server, add it to the graph and set a timeout to request again */ function requestData() { $.ajax({ url: 'live-server-data.php', success: function(point) { var series = chart.series[0], shift = series.data.length > 20; // shift if the series is longer than 20 // add the point chart.series[0].addPoint(point, true, shift); // call it again after one second setTimeout(requestData, 1000); }, cache: false }); } $(document).ready(function() { chart = new Highcharts.Chart({ chart: { renderTo: 'container', defaultSeriesType: 'spline', events: { load: requestData } }, title: { text: 'Live random data' }, xAxis: { type: 'datetime', tickPixelInterval: 150, maxZoom: 20 * 1000 }, yAxis: { minPadding: 0.2, maxPadding: 0.2, title: { text: 'Value', margin: 80 } }, series: [{ name: 'Random data', data: [] }] }); });
三、Highcharts 基本組成
- 標(biāo)題(Title)
圖表標(biāo)題,包含標(biāo)題和副標(biāo)題(subTitle),其中副標(biāo)題是非必須的。 - 坐標(biāo)軸(Axis)
坐標(biāo)軸包含x軸(xAxis)和y軸(yAxis)。通常情況下,x軸顯示在圖表的底部,y軸顯示在圖表的左側(cè)。多個(gè)數(shù)據(jù)列可以共同使用同一個(gè)坐標(biāo)軸,為了對(duì)比或區(qū)分?jǐn)?shù)據(jù),Highcharts提供了多軸的支持。 - 數(shù)據(jù)列(Series)
數(shù)據(jù)列即圖表上一個(gè)或多個(gè)數(shù)據(jù)系列,比如曲線圖中的一條曲線,柱狀圖中的一個(gè)柱形。 - 數(shù)據(jù)提示框(Tooltip)
鼠標(biāo)懸停在某點(diǎn)上時(shí),以框的形式提示該點(diǎn)的數(shù)據(jù),比如該點(diǎn)的值、數(shù)據(jù)單位等。數(shù)據(jù)提示框內(nèi)提示的信息完全可以通過格式化函數(shù)動(dòng)態(tài)指定。 - 圖例(Legend)
圖例是圖表中用不同形狀、顏色、文字等 標(biāo)示不同數(shù)據(jù)列,通過點(diǎn)擊標(biāo)示可以顯示或隱藏該數(shù)據(jù)列。 - 版權(quán)標(biāo)簽(Credits)
顯示在圖表右下方的包含鏈接的文字,默認(rèn)是Highcharts官網(wǎng)地址。通過指定credits.enabled=false即可不顯示該信息。 - 導(dǎo)出功能(Exporting)
通過引入 exporting.js即可增加圖表導(dǎo)出為常見文件功能。 - 標(biāo)示線(PlotLines)
可以在圖表上增加一條標(biāo)示線,比如平均值線,最高值線等。 - 標(biāo)示區(qū)(PlotBands)
可以在圖表添加不同顏色的區(qū)域帶,標(biāo)示出明顯的范圍區(qū)域。
四、配置選項(xiàng)
1、參數(shù)配置(屬性+事件)
- chart.events.addSeries:添加數(shù)列到圖表中。
- chart.events.click:整個(gè)圖表的繪圖區(qū)上所發(fā)生的點(diǎn)擊事件。
- chart.events.load:圖表加載事件。
- chart.events.redraw:圖表重畫事件,當(dāng)點(diǎn)擊圖注顯示和隱藏繪圖時(shí)可以觸發(fā)。
- chart.events.selection:當(dāng)圖表曲線可選擇放大時(shí),當(dāng)選擇圖表操作時(shí),可以觸發(fā)該事件。
- chart.height:所繪制圖表的高度值。
- chart.inverted:圖表中的x,y軸對(duì)換。
- chart.polar:是否為極性圖表。
- chart.reflow:當(dāng)窗口大小改變時(shí),圖表寬度自適應(yīng)窗口大小改變。
- chart.renderTo:圖表加載的位置,是頁面上的一個(gè)DOM對(duì)象。
- chart.showAxes:在空白圖表中,是否顯示坐標(biāo)軸。
- chart.type:圖表的類型,默認(rèn)為line,還有bar/column/pie……
- chart.width:圖表繪圖區(qū)的寬度,默認(rèn)為自適應(yīng)。
- chart.zoomType:圖表中數(shù)據(jù)報(bào)表的放大類型,可以以X軸放大,或是以Y軸放大,還可以以XY軸同時(shí)放大。
- colors:圖表中多數(shù)列時(shí),各數(shù)列之間的顏色。是一個(gè)數(shù)組,一般不動(dòng)。
- credits.enabled:是否允許顯示版權(quán)信息。
- credits.href:版權(quán)所有的鏈接。
- credits.text:版權(quán)信息顯示文字。
- exporting.buttons.exportButton.enabled:是否允許顯示導(dǎo)出按鈕。
- exporting.buttons.exportButton.menuItems:導(dǎo)出按鈕的菜單選項(xiàng)。
- exporting.buttons.exportButton.onclick:導(dǎo)出按鈕被點(diǎn)擊的事件,不是內(nèi)部的菜單。
- exporting.buttons.printButton.enabled:是否允許打印按鈕。
- exporting.buttons.printButton.onclick:打印按鈕的點(diǎn)擊事件。
- exporting.enabled:打印和導(dǎo)出按鈕是否被允許。
- exporting.filename:被導(dǎo)出文件的文件名。
- exporting.type:默認(rèn)導(dǎo)出圖片的文件格式。
- exporting.url:SVG圖表轉(zhuǎn)換并導(dǎo)出的接口處理地址。
- exporing.width:默認(rèn)導(dǎo)出圖片的寬度。
- labels:標(biāo)簽,可以加載到圖表的任何位置,里面有items,style。
- lang:語言參數(shù)配置,與導(dǎo)出按鈕菜單有關(guān)的配置,時(shí)間名稱的配置等。
- legend.enabled:是否允許圖注。
- navigation.buttonOptions.enabled:圖表中所有導(dǎo)航中的按鈕是否可被點(diǎn)擊。
- series:是一個(gè)數(shù)組。
- subtitle:配置圖表的子標(biāo)題。
- title:配置圖表的標(biāo)題。
- tooltip:配置圖表中數(shù)據(jù)的氣泡提示。
- xAxis,yAxis配置設(shè)置坐標(biāo)軸
- allowDecimals:坐標(biāo)軸上是否允許小數(shù)。
- categories:是一個(gè)數(shù)組,坐標(biāo)軸的分類。
- plotLines:繪制主線。
- tickColor:刻度顏色。
- tickInterval:刻度的步進(jìn)值。
- labels.rotation:刻度標(biāo)簽旋轉(zhuǎn)度數(shù)
2、Chart:圖表區(qū)選項(xiàng)
Chart圖表區(qū)選項(xiàng)用于設(shè)置圖表區(qū)相關(guān)屬性。
- backgroundColor:設(shè)置圖表區(qū)背景色。默認(rèn)值: #FFFFFF
- borderWidth:設(shè)置圖表邊框?qū)挾取DJ(rèn)值:0
- borderRadius:設(shè)置圖表邊框圓角角度。默認(rèn)值:5
- renderTo:圖表放置的容器,一般在html中放置一個(gè)DIV,獲取DIV的id屬性值。默認(rèn)值:null
- defaultSeriesType:默認(rèn)圖表類型line, spline, area, areaspline, column, bar, pie , scatter。默認(rèn)值:0
- width:圖表寬度,默認(rèn)根據(jù)圖表容器自適應(yīng)寬度。默認(rèn)值:null
- height:圖表高度,默認(rèn)根據(jù)圖表容器自適應(yīng)高度。默認(rèn)值:null
- margin:設(shè)置圖表與其他元素之間的間距,數(shù)組,如[0,0,0,0]。默認(rèn)值:[null]
- plotBackgroundColor:主圖表區(qū)背景色,即X軸與Y軸圍成的區(qū)域的背景色。默認(rèn)值:null
- plotBorderColor:主圖表區(qū)邊框的顏色,即X軸與Y軸圍成的區(qū)域的邊框顏色null
- plotBorderWidth:主圖表區(qū)邊框的寬度。默認(rèn)值:0
- shadow:是否設(shè)置陰影,需要設(shè)置背景色backgroundColor。默認(rèn)值:false
- reflow:是否自使用圖表區(qū)域高度和寬度,如果沒有設(shè)置width和height時(shí),會(huì)自適應(yīng)大小。默認(rèn)值:true
- zoomType:拖動(dòng)鼠標(biāo)進(jìn)行縮放,沿x軸或y軸進(jìn)行縮放,可以設(shè)置為:'x','y','xy'''
- events:事件回調(diào),支持addSeries方法,click方法,load方法,selection方法等的回調(diào)函數(shù)。默認(rèn)值:
3、Color:顏色選項(xiàng)
Color顏色選項(xiàng)用于設(shè)置圖表的顏色方案。
- color:用于展示圖表,折線/柱狀/餅狀等圖的顏色,數(shù)組形式。默認(rèn)值:array
Highcharts已經(jīng)默認(rèn)提供了多種顏色方案,當(dāng)要顯示的圖形多于顏色種類時(shí),多出的圖形會(huì)自動(dòng)從第一種顏色方案開始選取。自定義顏色方案的方法:
Highcharts.setOptions({ colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655','#FFF263', '#6AF9C4'] });
4、Title:標(biāo)題選項(xiàng),Subtitle:副標(biāo)題選項(xiàng)
Title標(biāo)題選項(xiàng)用于設(shè)置圖表的標(biāo)題相關(guān)屬性。
副標(biāo)題提供的屬性選項(xiàng)與標(biāo)題title大致相同,可參照標(biāo)題選項(xiàng),值得一提的是副標(biāo)題的text選項(xiàng)默認(rèn)為'',即空的,所以默認(rèn)情況下副標(biāo)題不顯示。
- text:標(biāo)題文本內(nèi)容。默認(rèn)值:Chart title
- align:水平對(duì)齊方式。默認(rèn)值:center
- verticalAlign:垂直對(duì)齊方式。默認(rèn)值:top
- margin:標(biāo)題與副標(biāo)題之間或者主圖表區(qū)間的間距。默認(rèn)值:15
- floating:是否浮動(dòng),如果為true,則標(biāo)題可以偏離主圖表區(qū),可配合x,y屬性使用。默認(rèn)值:false
- style:設(shè)置CSS樣式。默認(rèn)值:{color: '#3E576F',fontSize: '16px'}
var title = { text: '月平均氣溫' }; var subtitle = { text: 'Source: runoob.com' };
5、xAxis:X軸選項(xiàng),yAxis:Y軸選項(xiàng)
X軸選項(xiàng)用于設(shè)置圖表X軸相關(guān)屬性。
Y軸選項(xiàng)與上述xAxis選項(xiàng)基本一致,請(qǐng)參照上表中的參數(shù)設(shè)置,不再單獨(dú)列出。
- categories:設(shè)置X軸分類名稱,數(shù)組,例如:categories: ['Apples', 'Bananas', 'Oranges']。默認(rèn)值:[]
- title:X軸名稱,支持text、enabled、align、rotation、style等屬性。默認(rèn)值:
- labels:設(shè)置X軸各分類名稱的樣式style,格式formatter,角度rotation等。默認(rèn)值:array
- max:X軸最大值(categories為空時(shí)),如果為null,則最大值會(huì)根據(jù)X軸數(shù)據(jù)自動(dòng)匹配一個(gè)最大值。默認(rèn)值:null
- min:X軸最小值(categories為空時(shí)),如果為null,則最小值會(huì)根據(jù)X軸數(shù)據(jù)自動(dòng)匹配一個(gè)最小值。默認(rèn)值:array
- gridLineColor:網(wǎng)格(豎線)顏色。默認(rèn)值:#C0C0C0
- gridLineWidth:網(wǎng)格(豎線)寬度。默認(rèn)值:1
- lineColor:基線顏色。默認(rèn)值:#C0D0E0
- lineWidth:基線寬度。默認(rèn)值:0
var xAxis = { categories: ['一月', '二月', '三月', '四月', '五月', '六月' ,'七月', '八月', '九月', '十月', '十一月', '十二月'] }; var yAxis = { title: { text: 'Temperature (\xB0C)' }, plotLines: [{ value: 0, width: 1, color: '#808080' }] };
6、Series:數(shù)據(jù)列選項(xiàng)
數(shù)據(jù)列選項(xiàng)用于設(shè)置圖表中要展示的數(shù)據(jù)相關(guān)的屬性。
- data:顯示在圖表中的數(shù)據(jù)列,可以為數(shù)組或者JSON格式的數(shù)據(jù)。如:data:[0, 5, 3, 5],或data: [{name: 'Point 1',y: 0}, {name: 'Point 2',y: 5}]。默認(rèn)值:''
- series.data.color:某一個(gè)數(shù)據(jù)的顏色。
- series.data.dataLabels:序列中某一個(gè)數(shù)據(jù)的數(shù)據(jù)標(biāo)簽。
- series.data.events類同于plotOptions.area.point.events的相關(guān)配置。
- series.data.marker類同于plotOptions.area.marker的相關(guān)配置。
- series.data.name:配置數(shù)據(jù)點(diǎn)的名稱。
- series.data.sliced:配置在餅圖中,扇區(qū)的分離距離大小。
- series.data.x:點(diǎn)的x值。
- series.data.y:點(diǎn)的y值。
- name:顯示數(shù)據(jù)列的名稱。。默認(rèn)值:''
- type:數(shù)據(jù)列類型,支持 area, areaspline, bar, column, line, pie, scatter or spline。默認(rèn)值:lineseries.stack:堆疊的分組索引。
- xAxis,yAxis:當(dāng)使用多坐標(biāo)軸時(shí),指定某個(gè)數(shù)列對(duì)應(yīng)哪個(gè)坐標(biāo)軸。
var series = [ { name: 'Tokyo', data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] }, { name: 'New York', data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5] }, { name: 'Berlin', data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0] }, { name: 'London', data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8] } ];
7、plotOptions:數(shù)據(jù)點(diǎn)選項(xiàng)
plotOptions用于設(shè)置圖表中的數(shù)據(jù)點(diǎn)相關(guān)屬性。plotOptions根據(jù)各種圖表類型,其屬性設(shè)置略微有些差異,現(xiàn)將常用選項(xiàng)列出來。
- enabled:是否在數(shù)據(jù)點(diǎn)上直接顯示數(shù)據(jù)。默認(rèn)值:false
- allowPointSelect:是否允許使用鼠標(biāo)選中數(shù)據(jù)點(diǎn)。默認(rèn)值:false
- formatter:回調(diào)函數(shù),格式化數(shù)據(jù)顯示內(nèi)容。默認(rèn)值:formatter: function() {return this.y;}
- plotOptions.area.allowPointSelect:是否允許數(shù)據(jù)點(diǎn)的點(diǎn)擊。
- plotOptions.area.color:繪圖的顏色。
- plotOptions.area.dataLabels.enabled:是否允許數(shù)據(jù)標(biāo)簽。
- plotOptions.area.enableMouseTracking:是否允許數(shù)據(jù)圖表中,數(shù)據(jù)點(diǎn)的鼠標(biāo)跟蹤氣泡顯示。
- plotOptions.area.events.checkboxClick:數(shù)據(jù)圖表中圖注中復(fù)選框的點(diǎn)擊事件。
- plotOptions.area.events.click:數(shù)據(jù)圖表中,數(shù)據(jù)點(diǎn)的點(diǎn)擊事件。
- plotOptions.area.events.hide:數(shù)據(jù)圖表中,某一數(shù)據(jù)序列隱藏時(shí)的事件。
- plotOptions.area.events.show:數(shù)據(jù)圖表中,某一數(shù)據(jù)序列顯示時(shí)的事件。
- plotOptions.area.events.legendItemClick:數(shù)據(jù)圖表中,圖注中的項(xiàng)目被點(diǎn)擊時(shí)的事件,直接賦值false,則不可點(diǎn)擊。
- plotOptions.area.events.mouseOut:數(shù)據(jù)點(diǎn)的鼠標(biāo)移出事件。
- plotOptions.area.events.mouseOver:數(shù)據(jù)點(diǎn)的鼠標(biāo)經(jīng)過事件。
- plotOptions.area.marker.enabled:圖表中繪圖中是否顯示點(diǎn)的標(biāo)記符。
- plotOptions.area.marker.states.hover.enabled:是否允許標(biāo)記符的鼠標(biāo)經(jīng)過狀態(tài)。
- plotOptions.area.marker.states.select.enabled:是否允許標(biāo)記符的選擇狀態(tài)。
- plotOptions.area.point.events.click:圖表中每一個(gè)單獨(dú)的點(diǎn)點(diǎn)擊事件。
- plotOptions.area.point.events.mouseOut
- plotOptions.area.point.events..mouseOver
- plotOptions.area.point.events.remove:刪除圖表中的點(diǎn)時(shí)的事件。
- plotOptions.area.point.events.select:圖表中點(diǎn)選擇事件。
- plotOptions.area.point.events.unselect:圖表中點(diǎn)取消選擇時(shí)的事件。
- plotOptions.area.point.events.update:圖表中數(shù)據(jù)發(fā)生更新時(shí)的事件。
- plotOptions.area.visible:加載時(shí),數(shù)據(jù)序列默認(rèn)是顯示還是隱藏。
- plotOptions.area.zIndex:在多序列的情況下,調(diào)整每一個(gè)序列的層疊順序。
- 以上的point.events同樣還適用于其他面積類圖表(arearange、areaspline、areasplinerange),其他的柱狀圖(bar、column)及所有圖表。
- plotOptions.area.showInLegend:是否在圖注中顯示。
- plotOptions.area.stacking:是以值堆疊,還是以百分比堆疊。
- plotOptions.area.states.hover.enabled:鼠標(biāo)放上的狀態(tài)是否允許。
- plotOptions.area.stickyTracking:鼠標(biāo)粘性跟蹤數(shù)據(jù)點(diǎn)。
- plotOptions.arearange,plotOptions.areaspline,plotOptions.areasplinerange類同于plotOptions.area
- plotOptions.bar.groupPadding:對(duì)于柱狀圖分組,每個(gè)分組之間的間隔。
- plotOptions.bar.grouping:是否對(duì)數(shù)據(jù)進(jìn)行分組。
- plotOptions.bar.minPointLength::定義當(dāng)point值為零時(shí),點(diǎn)的最小長(zhǎng)度為多少
- plotOptions.bar.showInLegend:是否在圖注中顯示。
- plotOptions.bar.stacking:是以值堆疊,還是以百分比堆疊(normal/percent)。
- plotOptions.column,plotOptions.columnrange類同于plotOptions.bar
- plotOptions.line的相關(guān)配置類似于plotOptions.area配置。
- plotOptions.pie.ignoreHiddenPoint:在餅狀圖中,某一個(gè)序列經(jīng)圖注點(diǎn)擊隱藏后,整個(gè)餅狀圖是重新以100%分配,還是只在原圖基礎(chǔ)上隱藏,呈現(xiàn)一個(gè)缺口。
- plotOptions.pie.innerSize:繪制餅狀圖時(shí),餅狀圖的圓心預(yù)留多大的空白。
- plotOptions.pie.slicedOffset:與allowPointSelect結(jié)合使用,當(dāng)點(diǎn)被點(diǎn)擊時(shí),對(duì)應(yīng)的扇區(qū)剝離,這個(gè)參數(shù)即配置離開的距離。
- plotOptions.pie的其他常用配置參數(shù)類同于plotOptions.area,plotOptions.scatter,plotOptions.series,plotOptions.spline的相關(guān)配置類似于plotOptions.area配置。
8、Tooltip:數(shù)據(jù)點(diǎn)提示框
Tooltip用于設(shè)置當(dāng)鼠標(biāo)滑向數(shù)據(jù)點(diǎn)時(shí)顯示的提示框信息。
- enabled:是否顯示提示框。默認(rèn)值:true
- backgroundColor:設(shè)置提示框的背景色。默認(rèn)值:rgba(255, 255, 255, .85)
- borderColor:提示框邊框顏色,默認(rèn)自動(dòng)匹配數(shù)據(jù)列的顏色。默認(rèn)值:auto
- borderRadius:提示框圓角度。默認(rèn)值:5
- shadow:是否顯示提示框陰影。默認(rèn)值:true
- style:設(shè)置提示框內(nèi)容樣式,如字體顏色等。默認(rèn)值:color:'#333'
- formatter:回調(diào)函數(shù),用于格式化輸出提示框的顯示內(nèi)容。返回的內(nèi)容支持html標(biāo)簽如:b, strong, i, em, br, span。默認(rèn)值:2
- tooltip.valueDecimals:允許的小數(shù)點(diǎn)位數(shù)。
- tooltip.percentageDecimals:允許百分比的小數(shù)點(diǎn)后位數(shù)。
var tooltip = { valueSuffix: '\xB0C' }
9、Legend:圖例選項(xiàng)
legend用于設(shè)置圖例相關(guān)屬性。
- layout:顯示形式,支持水平horizontal和垂直vertical。默認(rèn)值:horizontal
- align:對(duì)齊方式。。默認(rèn)值:center
- backgroundColor:圖例背景色。。默認(rèn)值:null
- borderColor:圖例邊框顏色。。默認(rèn)值:#909090
- borderRadius:圖例邊框角度。默認(rèn)值:5
- enabled:是否顯示圖例。默認(rèn)值:true
- floating:是否可以浮動(dòng),配合x,y屬性。。默認(rèn)值:false
- shadow:是否顯示陰影。默認(rèn)值:false
- style:設(shè)置圖例內(nèi)容樣式。默認(rèn)值:''
var legend = { layout: 'vertical', align: 'right', verticalAlign: 'middle', borderWidth: 0 };
更多詳細(xì)信息請(qǐng)參照highcharts官網(wǎng)英文文檔:http://api.highcharts.com/highcharts
四、曲線圖
1、基礎(chǔ)曲線圖
var title = { text: '城市平均氣溫' }; var subtitle = { text: 'Source: runoob.com' }; var xAxis = { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }; var yAxis = { title: { text: 'Temperature (\xB0C)' }, plotLines: [{ value: 0, width: 1, color: '#808080' }] }; var tooltip = { valueSuffix: '\xB0C' } var legend = { layout: 'vertical', align: 'right', verticalAlign: 'middle', borderWidth: 0 }; var series = [ { name: 'Tokyo', data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] }, { name: 'New York', data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5] }, { name: 'London', data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8] } ]; var json = {}; json.title = title; json.subtitle = subtitle; json.xAxis = xAxis; json.yAxis = yAxis; json.tooltip = tooltip; json.legend = legend; json.series = series; $('#container').highcharts(json); });
2、帶有數(shù)據(jù)標(biāo)簽曲線圖表
var plotOptions = { line: { dataLabels: { enabled: true }, enableMouseTracking: false } };
3、異步加載數(shù)據(jù)曲線圖表
var title = { text: 'Daily visits at www.highcharts.com' }; var subtitle = { text: 'Source: Google Analytics' }; var xAxis = { tickInterval: 7 * 24 * 3600 * 1000, // 以每周為間隔設(shè)置 X 軸:one week tickWidth: 0, gridLineWidth: 1, labels: { align: 'left', x: 3, y: -3 } }; //以每周為間隔設(shè)置 Y 軸: //配置兩個(gè) Y 軸: var yAxis = [{ // 左邊 Y 軸 title: { text: null }, labels: { align: 'left', x: 3, y: 16, format: '{value:.,0f}' }, showFirstLabel: false },{ // 右邊 Y 軸 linkedTo: 0, gridLineWidth: 0, opposite: true, title: { text: null }, labels: { align: 'right', x: -3, y: 16, format: '{value:.,0f}' }, showFirstLabel: false } ]; var tooltip = { shared: true, crosshairs: true } var legend = { align: 'left', verticalAlign: 'top', y: 20, floating: true, borderWidth: 0 }; var plotOptions = { //plotOptions用于設(shè)置圖表中的數(shù)據(jù)點(diǎn)相關(guān)屬性。 series: { cursor: 'pointer', point: { events: { click: function (e) { hs.htmlExpand(null, { pageOrigin: { x: e.pageX || e.clientX, y: e.pageY || e.clientY }, headingText: this.series.name, maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) + ': ' + this.y + ' visits', width: 200 }); } } }, marker: { lineWidth: 1 } } } var series = [{ name: 'All visits', lineWidth: 4, marker: { radius: 4 } }, { name: 'New visitors' }] var json = {}; json.title = title; json.subtitle = subtitle; json.xAxis = xAxis; json.yAxis = yAxis; json.tooltip = tooltip; json.legend = legend; json.series = series; json.plotOptions = plotOptions; $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=analytics.csv&callback=?', function (csv) { var data = { csv: csv }; json.data = data; $('#container').highcharts(json); }); });
返回的文件內(nèi)容:
callback("# ----------------------------------------\n
# highcharts.com\n# Audience Overview\n# 20171217-20180117\n
# ----------------------------------------\n
Day Index,Users,Sessions\n
12/18/17,\"40,585\",\"48,351\"\n
12/19/17,\"43,039\",\"51,499\"\n
........12/20/17,\"44,926\",\"53,359\"\n
1/17/18,\"41,840\",\"50,285\"
");
4、基于時(shí)間的,可縮放的曲線圖表
var chart = { zoomType: 'x' }; var title = { text: 'USD to EUR exchange rate from 2006 through 2008' }; var subtitle = { text: document.ontouchstart === undefined ? 'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in' }; var xAxis = { type: 'datetime', minRange: 14 * 24 * 3600000 // 14 天 }; var yAxis = { title: { text: 'Exchange rate' } }; var legend = { enabled: false }; var plotOptions = { area: { fillColor: { linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1}, stops: [ [0, Highcharts.getOptions().colors[0]], [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')] ] }, marker: { radius: 2 }, lineWidth: 1, states: { hover: { lineWidth: 1 } }, threshold: null } }; var series= [{ type: 'area', name: 'USD to EUR', pointInterval: 24 * 3600 * 1000, pointStart: Date.UTC(2006, 0, 1), data: [ 0.8446, 0.8445, 0.8444, 0.8451, 0.8418, 0.8264, 0.8258, 0.8232, 0.8233, 0.8258, 0.8283, 0.8278, 0.8256, 0.8292, 0.8239, 0.8239, 0.8245, 0.8265, 0.8261, 0.8269, 0.8273, 0.8244, 0.8244, 0.8172, 0.8139, 0.8146, 0.8164, 0.82, 0.8269, 0.8269, 0.8269, 0.8258, 0.8247, 0.8286, 0.8289, 0.8316, 0.832, 0.8333, 0.8352, 0.8357, 0.8355, 0.8354, 0.8403, 0.8403, 0.8406, 0.8403, 0.8396, 0.8418, 0.8409, 0.8384, 0.8386, 0.8372, 0.839, 0.84, ] } ]; var json = {}; json.chart = chart; json.title = title; json.subtitle = subtitle; json.legend = legend; json.xAxis = xAxis; json.yAxis = yAxis; json.series = series; json.plotOptions = plotOptions; $('#container').highcharts(json); });
5、X 軸翻轉(zhuǎn)曲線圖
配置圖表類型 type 為 spline。chart.type 默認(rèn)為 "line"。
配置 X 軸翻轉(zhuǎn)。inverted 設(shè)置為 true 即 X 軸翻轉(zhuǎn),默認(rèn)為 false。
var chart = { type: 'spline', inverted: true }; var title = { text: 'Atmosphere Temperature by Altitude' }; var subtitle = { text: 'According to the Standard Atmosphere Model' }; var xAxis = { reversed: false, title: { enabled: true, text: 'Altitude' }, labels: { formatter: function () { return this.value + 'km'; } }, maxPadding: 0.05, showLastLabel: true }; var yAxis = { title: { text: 'Temperature' }, labels: { formatter: function () { return this.value + '\xB0'; } }, lineWidth: 2 }; var legend = { enabled: false }; var tooltip = { headerFormat: '{series.name} ', pointFormat: '{point.x} km: {point.y}\xB0C' }; var plotOptions = { spline: { marker: { enable: false } } }; var series= [{ name: 'Temperature', data: [[0, 15], [10, -50], [20, -56.5], [30, -46.5], [40, -22.1], [50, -2.5], [60, -27.7], [70, -55.7], [80, -76.5]] }]; var json = {}; json.chart = chart; json.title = title; json.subtitle = subtitle; json.legend = legend; json.tooltip = tooltip; json.xAxis = xAxis; json.yAxis = yAxis; json.series = series; json.plotOptions = plotOptions; $('#container').highcharts(json); });
6、帶標(biāo)記曲線圖
我們使用 marker.symbol 屬性來配置標(biāo)記。標(biāo)記可以是 'square', 'diamond' 或 圖片 url。標(biāo)記可以添加在任何的數(shù)據(jù)點(diǎn)上:
var chart = { type: 'spline' }; var title = { text: 'Monthly Average Temperature' }; var subtitle = { text: 'Source: WorldClimate.com' }; var xAxis = { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }; var yAxis = { title: { text: 'Temperature' }, labels: { formatter: function () { return this.value + '\xB0'; } }, lineWidth: 2 }; var tooltip = { crosshairs: true, shared: true }; var plotOptions = { spline: { marker: { radius: 4, lineColor: '#666666', lineWidth: 1 } } }; var series= [{ name: 'Tokyo', marker: { symbol: 'square' }, data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, { y: 26.5, marker: { symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)' } }, 23.3, 18.3, 13.9, 9.6] }, { name: 'London', marker: { symbol: 'diamond' }, data: [{ y: 3.9, marker: { symbol: 'url(http://www.highcharts.com/demo/gfx/snow.png)' } }, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8] } ]; var json = {}; json.chart = chart; json.title = title; json.subtitle = subtitle; json.tooltip = tooltip; json.xAxis = xAxis; json.yAxis = yAxis; json.series = series; json.plotOptions = plotOptions; $('#container').highcharts(json); });
7、標(biāo)示區(qū)曲線圖
使用 yAxis.plotBands 屬性來配置標(biāo)示區(qū)。區(qū)間范圍使用 'from' 和 'to' 屬性。顏色設(shè)置使用 'color' 屬性。標(biāo)簽樣式使用 'label' 屬性。
var chart = { type: 'spline' }; var title = { text: 'Wind speed during two days' }; var subtitle = { text: 'October 6th and 7th 2009 at two locations in Vik i Sogn, Norway' }; var xAxis = { type: 'datetime', labels: { overflow: 'justify' } }; var yAxis = { title: { text: 'Wind speed (m/s)' }, min: 0, minorGridLineWidth: 0, gridLineWidth: 0, alternateGridColor: null, plotBands: [{ // Light air from: 0.3, to: 1.5, color: 'rgba(68, 170, 213, 0.1)', label: { text: 'Light air', style: { color: '#606060' } } }, { // Light breeze from: 1.5, to: 3.3, color: 'rgba(0, 0, 0, 0)', label: { text: 'Light breeze', style: { color: '#606060' } } }, { // Gentle breeze from: 3.3, to: 5.5, color: 'rgba(68, 170, 213, 0.1)', label: { text: 'Gentle breeze', style: { color: '#606060' } } }, { // Moderate breeze from: 5.5, to: 8, color: 'rgba(0, 0, 0, 0)', label: { text: 'Moderate breeze', style: { color: '#606060' } } }, { // Fresh breeze from: 8, to: 11, color: 'rgba(68, 170, 213, 0.1)', label: { text: 'Fresh breeze', style: { color: '#606060' } } }, { // Strong breeze from: 11, to: 14, color: 'rgba(0, 0, 0, 0)', label: { text: 'Strong breeze', style: { color: '#606060' } } }, { // High wind from: 14, to: 15, color: 'rgba(68, 170, 213, 0.1)', label: { text: 'High wind', style: { color: '#606060' } } }] }; var tooltip = { valueSuffix: ' m/s' }; var plotOptions = { spline: { lineWidth: 4, states: { hover: { lineWidth: 5 } }, marker: { enabled: false }, pointInterval: 3600000, // one hour pointStart: Date.UTC(2009, 9, 6, 0, 0, 0) } }; var series= [{ name: 'Vik i Sogn', data: [4.3, 5.1, 4.3, 5.2, 5.4, 4.7, 3.5, 4.1, 5.6, 7.4, 6.9, 7.1, 7.9, 7.9, 7.5, 6.7, 7.7, 7.7, 7.4, 7.0, 7.1, 5.8, 5.9, 7.4, 8.2, 8.5, 9.4, 8.1, 10.9, 10.4, 10.9, 12.4, 12.1, 9.5, 7.5, 7.1, 7.5, 8.1, 6.8, 3.4, 2.1, 1.9, 2.8, 2.9, 1.3, 4.4, 4.2, 3.0, 3.0] }, { name: 'Norway', data: [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.1, 0.0, 0.3, 0.0, 0.0, 0.4, 0.0, 0.1, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.6, 1.2, 1.7, 0.7, 2.9, 4.1, 2.6, 3.7, 3.9, 1.7, 2.3, 3.0, 3.3, 4.8, 5.0, 4.8, 5.0, 3.2, 2.0, 0.9, 0.4, 0.3, 0.5, 0.4] }]; var navigation = { menuItemStyle: { fontSize: '10px' } } var json = {}; json.chart = chart; json.title = title; json.subtitle = subtitle; json.tooltip = tooltip; json.xAxis = xAxis; json.yAxis = yAxis; json.series = series; json.plotOptions = plotOptions; json.navigation = navigation; $('#container').highcharts(json); });
8、不規(guī)則時(shí)間間隔圖表
var chart = { type: 'spline' }; var title = { text: 'Snow depth at Vikjafjellet, Norway' }; var subtitle = { text: 'Irregular time data in Highcharts JS' }; var xAxis = { type: 'datetime', dateTimeLabelFormats: { // don't display the dummy year month: '%e. %b', year: '%b' }, title: { text: 'Date' } }; var yAxis = { title: { text: 'Snow depth (m)' }, min: 0 }; var tooltip = { headerFormat: '{series.name} ', pointFormat: '{point.x:%e. %b}: {point.y:.2f} m' }; var plotOptions = { spline: { marker: { enabled: true } } }; var series= [{ name: 'Winter 2007-2008', // Define the data points. All series have a dummy year // of 1970/71 in order to be compared on the same x axis. Note // that in JavaScript, months start at 0 for January, 1 for February etc. data: [ [Date.UTC(1970, 9, 27), 0 ], [Date.UTC(1970, 10, 10), 0.6 ], [Date.UTC(1970, 10, 18), 0.7 ], [Date.UTC(1970, 11, 2), 0.8 ], [Date.UTC(1970, 11, 9), 0.6 ], [Date.UTC(1970, 11, 16), 0.6 ], [Date.UTC(1970, 11, 28), 0.67], [Date.UTC(1971, 0, 1), 0.81], [Date.UTC(1971, 0, 8), 0.78], [Date.UTC(1971, 0, 12), 0.98], [Date.UTC(1971, 0, 27), 1.84], [Date.UTC(1971, 1, 10), 1.80], [Date.UTC(1971, 1, 18), 1.80], [Date.UTC(1971, 1, 24), 1.92], [Date.UTC(1971, 2, 4), 2.49], [Date.UTC(1971, 2, 11), 2.79], [Date.UTC(1971, 2, 15), 2.73], [Date.UTC(1971, 2, 25), 2.61], [Date.UTC(1971, 3, 2), 2.76], [Date.UTC(1971, 3, 6), 2.82], [Date.UTC(1971, 3, 13), 2.8 ], [Date.UTC(1971, 4, 3), 2.1 ], [Date.UTC(1971, 4, 26), 1.1 ], [Date.UTC(1971, 5, 9), 0.25], [Date.UTC(1971, 5, 12), 0 ] ] }, { name: 'Winter 2008-2009', data: [ [Date.UTC(1970, 9, 18), 0 ], [Date.UTC(1970, 9, 26), 0.2 ], [Date.UTC(1970, 11, 1), 0.47], [Date.UTC(1970, 11, 11), 0.55], [Date.UTC(1970, 11, 25), 1.38], [Date.UTC(1971, 0, 8), 1.38], [Date.UTC(1971, 0, 15), 1.38], [Date.UTC(1971, 1, 1), 1.38], [Date.UTC(1971, 1, 8), 1.48], [Date.UTC(1971, 1, 21), 1.5 ], [Date.UTC(1971, 2, 12), 1.89], [Date.UTC(1971, 2, 25), 2.0 ], [Date.UTC(1971, 3, 4), 1.94], [Date.UTC(1971, 3, 9), 1.91], [Date.UTC(1971, 3, 13), 1.75], [Date.UTC(1971, 3, 19), 1.6 ], [Date.UTC(1971, 4, 25), 0.6 ], [Date.UTC(1971, 4, 31), 0.35], [Date.UTC(1971, 5, 7), 0 ] ] }, { name: 'Winter 2009-2010', data: [ [Date.UTC(1970, 9, 9), 0 ], [Date.UTC(1970, 9, 14), 0.15], [Date.UTC(1970, 10, 28), 0.35], [Date.UTC(1970, 11, 12), 0.46], [Date.UTC(1971, 0, 1), 0.59], [Date.UTC(1971, 0, 24), 0.58], [Date.UTC(1971, 1, 1), 0.62], [Date.UTC(1971, 1, 7), 0.65], [Date.UTC(1971, 1, 23), 0.77], [Date.UTC(1971, 2, 8), 0.77], [Date.UTC(1971, 2, 14), 0.79], [Date.UTC(1971, 2, 24), 0.86], [Date.UTC(1971, 3, 4), 0.8 ], [Date.UTC(1971, 3, 18), 0.94], [Date.UTC(1971, 3, 24), 0.9 ], [Date.UTC(1971, 4, 16), 0.39], [Date.UTC(1971, 4, 21), 0 ] ] } ]; var json = {}; json.chart = chart; json.title = title; json.subtitle = subtitle; json.tooltip = tooltip; json.xAxis = xAxis; json.yAxis = yAxis; json.series = series; json.plotOptions = plotOptions; $('#container').highcharts(json); });
9、對(duì)數(shù)圖表
配置 yAxis.type 為 'logarithmic'。它定義了 x 軸類型??蛇x值有 "linear", "logarithmic", "datetime" 或 "category"。默認(rèn)值為linear。
var title = { text: '對(duì)數(shù)實(shí)例(runoob.com)' }; var xAxis = { tickInterval: 1 }; var yAxis = { type: 'logarithmic', minorTickInterval: 0.1 }; var tooltip = { headerFormat: '{series.name} ', pointFormat: 'x = {point.x}, y = {point.y}' }; var plotOptions = { spline: { marker: { enabled: true } } }; var series= [{ name: 'data', data: [1, 2, 4, 8, 16, 32, 64, 128, 256, 512], pointStart: 1 } ]; var json = {}; json.title = title; json.tooltip = tooltip; json.xAxis = xAxis; json.yAxis = yAxis; json.series = series; json.plotOptions = plotOptions; $('#container').highcharts(json); });
五、條形圖
1、基本條形圖
設(shè)置 chart 的 type 屬性 為 bar ,chart.type 描述了圖表類型。默認(rèn)值為 "line"。
var chart = { type: 'bar' }; var title = { text: 'Historic World Population by Region' }; var subtitle = { text: 'Source: Wikipedia.org' }; var xAxis = { categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'], title: { text: null } }; var yAxis = { min: 0, title: { text: 'Population (millions)', align: 'high' }, labels: { overflow: 'justify' } }; var tooltip = { valueSuffix: ' millions' }; var plotOptions = { bar: { dataLabels: { enabled: true } } }; var legend = { layout: 'vertical', align: 'right', verticalAlign: 'top', x: -40, y: 100, floating: true, borderWidth: 1, backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'), shadow: true }; var credits = { enabled: false }; var series= [{ name: 'Year 1800', data: [107, 31, 635, 203, 2] }, { name: 'Year 1900', data: [133, 156, 947, 408, 6] }, { name: 'Year 2008', data: [973, 914, 4054, 732, 34] } ]; var json = {}; json.chart = chart; json.title = title; json.subtitle = subtitle; json.tooltip = tooltip; json.xAxis = xAxis; json.yAxis = yAxis; json.series = series; json.plotOptions = plotOptions; json.legend = legend; json.credits = credits; $('#container').highcharts(json); });
2、堆疊條形圖
配置圖表堆疊使用 plotOptions.series.stacking,并設(shè)置為 "normal"。
如果禁用堆疊可設(shè)置為 null , "normal" 通過值設(shè)置堆疊, "percent" 堆疊則按百分比。
var plotOptions = { bar: { dataLabels: { enabled: true } }, series: { stacking: 'normal' } };
3、反向條形圖
使用負(fù)值的,反向條形圖。
var series= [{ name: 'John', data: [5, 3, 4, 7, 2] }, { name: 'Jane', data: [2, -2, -3, 2, 1] }, { name: 'Joe', data: [3, 4, 4, -2, 5] } ];
六 、柱形圖
1、基本柱形圖
var chart = { type: 'column' }; var title = { text: '每月平均降雨量' }; var subtitle = { text: 'Source: runoob.com' }; var xAxis = { categories: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'], crosshair: true }; var yAxis = { min: 0, title: { text: '降雨量 (mm)' } }; var tooltip = { headerFormat: '{point.key}', pointFormat: '' + '', footerFormat: '{series.name}: {point.y:.1f} mm', shared: true, useHTML: true }; var plotOptions = { column: { pointPadding: 0.2, borderWidth: 0 } }; var credits = { enabled: false }; var series= [{ name: 'Tokyo', data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] }, { name: 'New York', data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3] }, { name: 'London', data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2] }, { name: 'Berlin', data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1] }]; var json = {}; json.chart = chart; json.title = title; json.subtitle = subtitle; json.tooltip = tooltip; json.xAxis = xAxis; json.yAxis = yAxis; json.series = series; json.plotOptions = plotOptions; json.credits = credits; $('#container').highcharts(json); });
2、反向柱形圖
七、餅圖
基本餅圖
var chart = { plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false }; var title = { text: '2014 年各瀏覽器市場(chǎng)占有比例' }; var tooltip = { pointFormat: '{series.name}: {point.percentage:.1f}%' }; var plotOptions = { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: true, format: '{point.name}%: {point.percentage:.1f} %', style: { color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' } } } }; var series= [{ type: 'pie', name: 'Browser share', data: [ ['Firefox', 45.0], ['IE', 26.8], { name: 'Chrome', y: 12.8, sliced: true, selected: true }, ['Safari', 8.5], ['Opera', 6.2], ['Others', 0.7] ] }]; var json = {}; json.chart = chart; json.title = title; json.tooltip = tooltip; json.series = series; json.plotOptions = plotOptions; $('#container').highcharts(json); });
八、3D圖
3D 柱形圖
設(shè)置 chart 的 type 屬性為 column,options3d 選項(xiàng)可設(shè)置三維效果。
var chart = { renderTo: 'container', type: 'column', margin: 75, options3d: { enabled: true, alpha: 15, beta: 15, depth: 50, viewDistance: 25 } }; var title = { text: '圖表旋轉(zhuǎn)實(shí)例' }; var subtitle = { text: '通過拖動(dòng)下面的滑塊測(cè)試' }; var plotOptions = { column: { depth: 25 } }; var series= [{ data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] }]; var json = {}; json.chart = chart; json.title = title; json.subtitle = subtitle; json.series = series; json.plotOptions = plotOptions; var highchart = new Highcharts.Chart(json); function showValues() { $('#R0-value').html(highchart.options.chart.options3d.alpha); $('#R1-value').html(highchart.options.chart.options3d.beta); } // Activate the sliders $('#R0').on('change', function () { highchart.options.chart.options3d.alpha = this.value; showValues(); highchart.redraw(false); }); $('#R1').on('change', function () { highchart.options.chart.options3d.beta = this.value; showValues(); highchart.redraw(false); }); showValues(); });
九、測(cè)量圖(儀表圖)
測(cè)量圖
var chart = { type: 'gauge', plotBackgroundColor: null, plotBackgroundImage: null, plotBorderWidth: 0, plotShadow: false }; var title = { text: '車速表' }; var pane = { startAngle: -150, endAngle: 150, background: [{ 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%' }] }; // the value axis var yAxis = { min: 0, max: 200, minorTickInterval: 'auto', minorTickWidth: 1, minorTickLength: 10, minorTickPosition: 'inside', minorTickColor: '#666', tickPixelInterval: 30, tickWidth: 2, tickPosition: 'inside', tickLength: 10, tickColor: '#666', labels: { step: 2, rotation: 'auto' }, title: { text: 'km/h' }, plotBands: [{ from: 0, to: 120, color: '#55BF3B' // green }, { from: 120, to: 160, color: '#DDDF0D' // yellow }, { from: 160, to: 200, color: '#DF5353' // red }] }; var series= [{ name: 'Speed', data: [80], tooltip: { valueSuffix: ' km/h' } }]; var json = {}; json.chart = chart; json.title = title; json.pane = pane; json.yAxis = yAxis; json.series = series; // Add some life var chartFunction = function (chart) { if (!chart.renderer.forExport) { setInterval(function () { var point = chart.series[0].points[0], newVal, inc = Math.round((Math.random() - 0.5) * 20); newVal = point.y + inc; if (newVal < 0 || newVal > 200) { newVal = point.y - inc; } point.update(newVal); }, 3000); } }; $('#container').highcharts(json,chartFunction); });
十、組合圖
柱形圖,線條圖,餅圖
var title = { text: 'Combination chart' }; var xAxis = { categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums'] }; var labels = { items: [{ html: '水果消費(fèi)', style: { left: '50px', top: '18px', color: (Highcharts.theme && Highcharts.theme.textColor) || 'black' } }] }; var series= [{ type: 'column', name: 'Jane', data: [3, 2, 1, 3, 4] }, { type: 'column', name: 'John', data: [2, 3, 5, 7, 6] }, { type: 'column', name: 'Joe', data: [4, 3, 3, 9, 0] }, { type: 'spline', name: 'Average', data: [3, 2.67, 3, 6.33, 3.33], marker: { lineWidth: 2, lineColor: Highcharts.getOptions().colors[3], fillColor: 'white' } }, { type: 'pie', name: '總消費(fèi)', data: [{ name: 'Jane', y: 13, color: Highcharts.getOptions().colors[0] // Jane 的顏色 }, { name: 'John', y: 23, color: Highcharts.getOptions().colors[1] // John 的顏色 }, { name: 'Joe', y: 19, color: Highcharts.getOptions().colors[2] // Joe 的顏色 }], center: [100, 80], size: 100, showInLegend: false, dataLabels: { enabled: false } } ]; var json = {}; json.title = title; json.xAxis = xAxis; json.labels = labels; json.series = series; $('#container').highcharts(json); });
十一、動(dòng)態(tài)圖
每秒更新曲線圖
chart.event 屬性中添加 load 方法(圖表加載事件)。在 1000 毫秒內(nèi)隨機(jī)產(chǎn)生數(shù)據(jù)點(diǎn)并生成圖表。
var chart = { type: 'spline', animation: Highcharts.svg, // don't animate in IE < IE 10. marginRight: 10, events: { load: function () { // set up the updating of the chart each second var series = this.series[0]; setInterval(function () { var x = (new Date()).getTime(), // current time y = Math.random(); series.addPoint([x, y], true, true); }, 1000); } } }; var title = { text: 'Live random data' }; var xAxis = { type: 'datetime', tickPixelInterval: 150 }; var yAxis = { title: { text: 'Value' }, plotLines: [{ value: 0, width: 1, color: '#808080' }] }; var tooltip = { formatter: function () { return '' + this.series.name + ' ' + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + ' ' + Highcharts.numberFormat(this.y, 2); } }; var plotOptions = { area: { pointStart: 1940, marker: { enabled: false, symbol: 'circle', radius: 2, states: { hover: { enabled: true } } } } }; var legend = { enabled: false }; var exporting = { enabled: false }; var series= [{ name: 'Random data', data: (function () { // generate an array of random data var data = [],time = (new Date()).getTime(),i; for (i = -19; i <= 0; i += 1) { data.push({ x: time + i * 1000, y: Math.random() }); } return data; }()) }]; var json = {}; json.chart = chart; json.title = title; json.tooltip = tooltip; json.xAxis = xAxis; json.yAxis = yAxis; json.legend = legend; json.exporting = exporting; json.series = series; json.plotOptions = plotOptions; Highcharts.setOptions({ global: { useUTC: false } }); $('#container').highcharts(json); });
到此這篇關(guān)于JavaScript圖表插件highcharts的文章就介紹到這了。希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- JS highcharts動(dòng)態(tài)柱狀圖原理及實(shí)現(xiàn)
- JS highcharts實(shí)現(xiàn)動(dòng)態(tài)曲線代碼示例
- highcharts.js數(shù)據(jù)綁定方式代碼實(shí)例
- Javascript highcharts 餅圖顯示數(shù)量和百分比實(shí)例代碼
- html+js+highcharts繪制圓餅圖表的簡(jiǎn)單實(shí)例
- 淺析jquery的js圖表組件highcharts
- Highcharts 非常實(shí)用的Javascript統(tǒng)計(jì)圖demo示例
- 純JAVASCRIPT圖表動(dòng)畫插件Highcharts Examples
- jQuery.Highcharts.js繪制柱狀圖餅狀圖曲線圖
相關(guān)文章
javascript的數(shù)組和常用函數(shù)詳解
這篇文章主要介紹了javascript的數(shù)組和常用函數(shù)詳解,非常詳細(xì),適合新手學(xué)習(xí),需要的朋友可以參考下2014-05-05對(duì)Js OOP編程 創(chuàng)建對(duì)象的一些全面理解
下面小編就為大家?guī)硪黄獙?duì)Js OOP編程 創(chuàng)建對(duì)象的一些全面理解。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07jquery中prop()方法和attr()方法的區(qū)別淺析
官方例舉的例子感覺和attr()差不多,也不知道有什么區(qū)別,既然有了prop()這個(gè)新方法,不可能沒用吧,那什么時(shí)候該用attr(),什么時(shí)候該用prop()呢2013-09-09window.requestAnimationFrame是什么意思,怎么用
window.requestAnimationFrame 告訴瀏覽器您要執(zhí)行的動(dòng)畫并且請(qǐng)求瀏覽器的在下一個(gè)動(dòng)畫幀重繪窗口,方法在瀏覽器重繪之前作為一個(gè)回調(diào)函數(shù)被調(diào)用,就是告訴瀏覽器在刷新屏幕的時(shí)候,調(diào)用這個(gè)方法2013-01-01Javascript學(xué)習(xí)筆記之 函數(shù)篇(三) : 閉包和引用
本系列好久沒更新了,今天重新拿過來,繼續(xù)前面未完成的事項(xiàng),本文我們就來談?wù)凧avascript 中一個(gè)最重要的特性--閉包的使用引用。2014-11-11