Go Highcharts Instrument Panel Production

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

This article transferred from: http://blog.csdn.net/javaliuzhiyue/article/details/9943751

The use of the HIGHCHARTS instrument panel is simply packaged for easy use

In the Mygaugechart.js file

var chart;/** * * @param containerid Container id * @param min min * @param max Max * @param step step * @param text title * @para M Name Series 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,plotbackgro Undcolor: "#000000",//${pagecontext.request.contextpath}/js/1.jpgplotbackgroundimage:null,//width220 Height135width:220,height:135},exporting: {//Whether export enabled:false},credits is allowed: {enabled:false},title: {text: '}, pane: [{startangle: The center point of the -90,endangle:90,background:null,//Polar chart or angle meter, positioned like an array [x, Y]. The position can be an integer in pixels or a percentage of the plot Area center: [' 50% ', ' 90% '],size:125}],yaxis: {min:min,max:max,//step tickinterval:step,min Ortickposition: ' Outside ', tickposition: ' Outside ', Labels: {///scale value rotation angle rotation: ' Auto ', Distance:20,style: {color: ' #F FFFFF ', FontWeight: ' Bold '}},plotbands: [{//Alert red area length//from:80,//to: 100,//color: ' #C02316 ',///red area to detect tick marks Innerradius: ' 100% ', Outerradius: ' 115% '}],//dial, half-circle for 0, rest for round pane:0,title: {styl  E: {color: ' #FFFFFF ', fontSize: ' 12px '},text:text,y: -5}},plotoptions: {gauge:} {datalabels: {enabled:false},dial: { BackgroundColor: ' #FFD700 ',//RADIUS: Pointer length radius: ' 100% '}}},series: [{data:a,name:name,yaxis:0}]},function (chart) {///This function can be added with timing effect }); 

Called on the page: mygaugechart ("container", 0,100, 20, "(Unit:%)", "series", ();

Mygaugechart ("Container1", 0,100, 20, "Maybach", "series", 10); Mygaugechart ("Container2", 0,100, 20, "Maserati", "series", 40); Mygaugechart ("Container3", 0,100, 20, "Ferrari", "series", +);

Effect:

 

Go Highcharts Instrument Panel Production