Highcharts 圆形进度条式测量图
以下实例演示了圆形进度条式测量图。
我们在前面的章节已经了解了 Highcharts 基本配置语法。接下来让我们来看下其他的配置。
配置
chart.type 配置
配置 chart 的 type 为 'solidguage' 。chart.type 描述了图表类型。默认值为 "line"。
var chart = { type: 'solidguage' };
pane 配置
pane 只适用在极坐标图和角度测量仪。此可配置对象持有组合x轴和y周的常规选项。每个x轴和y轴都可以通过索引关联到窗格中。
var pane = { startAngle: -150, // x轴或测量轴的开始度数，以度数的方式给出。0是北 endAngle: 150 //x轴极坐标或角度轴的最终度数，以度数的方式给出。0是北 };
实例
文件名：highcharts_guage_solid.htm
<html> <head> <title>Highcharts 教程 | 菜鸟教程(runoob.com)</title> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script src="/try/demo_source/highcharts.js"></script> <script src="/try/demo_source/highcharts-more.js"></script> <script src="http://code.highcharts.com/modules/solid-gauge.js"></script> </head> <body> <div style="width: 600px; height: 400px; margin: 0 auto"> <div id="container-speed" style="width: 300px; height: 200px; float: left"></div> <div id="container-rpm" style="width: 300px; height: 200px; float: left"></div> </div> <script language="JavaScript"> $(document).ready(function() { var chart = { type: 'solidgauge' }; var title = null; var pane = { center: ['50%', '85%'], size: '140%', startAngle: -90, endAngle: 90, background: { backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE', innerRadius: '60%', outerRadius: '100%', shape: 'arc' } }; var tooltip = { enabled: false }; // the value axis var yAxis = { stops: [ [0.1, '#55BF3B'], // green [0.5, '#DDDF0D'], // yellow [0.9, '#DF5353'] // red ], lineWidth: 0, minorTickInterval: null, tickPixelInterval: 400, tickWidth: 0, title: { y: -70 }, labels: { y: 16 }, min: 0, max: 200, title: { text: 'Speed' } }; var plotOptions = { solidgauge: { dataLabels: { y: 5, borderWidth: 0, useHTML: true } } }; var credits = { enabled: false }; var series = [{ name: 'Speed', data: [80], dataLabels: { format: '<div style="text-align:center"><span style="font-size:25px;color:' + ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' + '<span style="font-size:12px;color:silver">km/h</span></div>' }, tooltip: { valueSuffix: ' km/h' } }]; var json = {}; json.chart = chart; json.title = title; json.pane = pane; json.tooltip = tooltip; json.yAxis = yAxis; json.credits = credits; json.series = series; $('#container-speed').highcharts(json); // the value axis yAxis = { stops: [ [0.1, '#55BF3B'], // green [0.5, '#DDDF0D'], // yellow [0.9, '#DF5353'] // red ], lineWidth: 0, minorTickInterval: null, tickPixelInterval: 400, tickWidth: 0, title: { y: -70 }, labels: { y: 16 }, min: 0, max: 5, title: { text: 'RPM' } }; series = [{ name: 'RPM', data: [1], dataLabels: { format: '<div style="text-align:center"><span style="font-size:25px;color:' + ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y:.1f}</span><br/>' + '<span style="font-size:12px;color:silver">* 1000 / min</span></div>' }, tooltip: { valueSuffix: ' revolutions/min' } }]; json.yAxis = yAxis; json.series = series; $('#container-rpm').highcharts(json); var chartFunction = function() { // Speed var chart = $('#container-speed').highcharts(); var point; var newVal; var inc; if (chart) { point = chart.series[0].points[0]; inc = Math.round((Math.random() - 0.5) * 100); newVal = point.y + inc; if (newVal < 0 || newVal > 200) { newVal = point.y - inc; } point.update(newVal); } // RPM chart = $('#container-rpm').highcharts(); if (chart) { point = chart.series[0].points[0]; inc = Math.random() - 0.5; newVal = point.y + inc; if (newVal < 0 || newVal > 5) { newVal = point.y - inc; } point.update(newVal); } }; // Bring life to the dials setInterval(chartFunction, 2000); }); </script> </body> </html>