Highcharts biaxially speedometer
The following example demonstrates biaxially speedometer.
In the previous section we already know Highcharts basic configuration syntax. Let's look at the other configurations.
Configuration
chart.type Configuration
Configure the type of chart 'gauge'. chart.type describes the chart type. The default value is "line".
var chart = { type: 'gauge' };
Configure pane
pane is only available in polar plot and angle measuring instrument. This configurable object holds general options combination x-axis and y-week. Each x-axis and y-axis can be linked to the pane by index.
var pane = { startAngle: -150, // x轴或测量轴的开始度数,以度数的方式给出。0是北 endAngle: 150 //x轴极坐标或角度轴的最终度数,以度数的方式给出。0是北 };
Examples
File name: highcharts_guage_dualaxes.htm
<html> <head> <meta charset="UTF-8" /> <title>Highcharts 教程 | 本教程(w3big.com)</title> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script src="http://code.highcharts.com/highcharts.js"></script> <script src="http://code.highcharts.com/highcharts-more.js"></script> </head> <body> <div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div> <script language="JavaScript"> $(document).ready(function() { var chart = { type: 'gauge', plotBackgroundColor: null, plotBackgroundImage: null, plotBorderWidth: 0, plotShadow: false }; var credits = { enabled: false }; var title = { text: '双轴车速表' }; var pane = { startAngle: -150, endAngle: 150 }; // the value axis var yAxis = [{ min: 0, max: 200, lineColor: '#339', tickColor: '#339', minorTickColor: '#339', offset: -25, lineWidth: 2, labels: { distance: -20, rotation: 'auto' }, tickLength: 5, minorTickLength: 5, endOnTick: false }, { min: 0, max: 124, tickPosition: 'outside', lineColor: '#933', lineWidth: 2, minorTickPosition: 'outside', tickColor: '#933', minorTickColor: '#933', tickLength: 5, minorTickLength: 5, labels: { distance: 12, rotation: 'auto' }, offset: -20, endOnTick: false }]; var series= [{ name: 'Speed', data: [80], dataLabels: { formatter: function () { var kmh = this.y, mph = Math.round(kmh * 0.621); return '<span style="color:#339">' + kmh + ' km/h</span><br/>' + '<span style="color:#933">' + mph + ' mph</span>'; }, backgroundColor: { linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, stops: [ [0, '#DDD'], [1, '#FFF'] ] } }, tooltip: { valueSuffix: ' km/h' } }]; var json = {}; json.chart = chart; json.credits = credits; json.title = title; json.pane = pane; json.yAxis = yAxis; json.series = series; // Add some life var chartFunction = function (chart) { 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); }); </script> </body> </html>
The above example output is: