[轉]Highcharts儀錶盤製作

標籤：

http://www.runoob.com/highcharts/highcharts-guage-solid.html

 

 

本文轉自：http://blog.csdn.net/javaliuzhiyue/article/details/9943751

對Highcharts儀錶盤的使用進行了簡單的封裝，方便大家使用  

myGaugeChart.js檔案中  

var chart;/** *  * @param containerId 容器id * @param min  最小值 * @param max  最大值 * @param step  步長 * @param text  標題 * @param name  系列名 * @param data  資料 */function myGaugeChart(containerId, min, max, step, text, name, data) {var a = new Array();a.push(data);chart = new Highcharts.Chart({chart : {renderTo : containerId,type : "gauge",plotBorderWidth : 1,plotBackgroundColor : "#000000",// ${pageContext.request.contextPath }/js/1.jpgplotBackgroundImage : null,// width220 height135width : 220,height : 135},exporting : {// 是否允許匯出enabled : false},credits : {enabled : false},title : {text : ‘‘},pane : [ {startAngle : -90,endAngle : 90,background : null,// 極座標圖或角度測量儀的中心點，像數組[x,y]一樣定位。位置可以是以像素為單位的整數或者是繪圖區域的百分比center : [ ‘50%‘, ‘90%‘ ],size : 125} ],yAxis : {min : min,max : max,// 步長tickInterval : step,minorTickPosition : ‘outside‘,tickPosition : ‘outside‘,labels : {// 刻度值旋轉角度rotation : ‘auto‘,distance : 20,style: {color: ‘#FFFFFF‘,fontWeight: ‘bold‘}},plotBands : [ {// 預警紅色地區長度// from: 80,// to: 100,// color: ‘#C02316‘,// 紅色地區查出刻度標記innerRadius : ‘100%‘,outerRadius : ‘115%‘} ],// 錶盤,為0時為半圓，其餘都為圓pane : 0,title : {style: {color:‘#FFFFFF‘,fontSize: ‘12px‘},text : text,y : -5}},plotOptions : {gauge : {dataLabels : {enabled : false},dial : { backgroundColor: ‘#FFD700‘,// 半徑：指標長度radius : ‘100%‘}}},series : [ {data : a,name : name,yAxis : 0} ]},function(chart) {//此函數中可以加上定時效果});}

 

在頁面調用： myGaugeChart("container",0,100,20,"(單位:%)","系列",20);

myGaugeChart("container1",0,100,20,"邁巴哈","系列",10); myGaugeChart("container2",0,100,20,"瑪莎拉蒂","系列",40); myGaugeChart("container3",0,100,20,"法拉利","系列",80);

效果：

 

           
 
     

 

[轉]Highcharts儀錶盤製作