Highcharts diagrama de medición barra de progreso circular
El siguiente ejemplo ilustra el diagrama de medición barra de progreso circular.
En la sección anterior que ya sabemos Highcharts sintaxis de configuración básica. Veamos las otras configuraciones.
configuración
Configuración chart.type
Configurar el tipo de gráfico 'solidguage'. chart.type describe el tipo de gráfico. El valor por defecto es "línea".
var chart = { type: 'solidguage' };
configurar panel
panel sólo está disponible en el diagrama polar y el instrumento de medición de ángulos. Este objeto configurable tiene opciones de combinación eje x e y en general semanas. Cada eje x y el eje y se pueden vincular al panel por índice.
var pane = { startAngle: -150, // x轴或测量轴的开始度数,以度数的方式给出。0是北 endAngle: 150 //x轴极坐标或角度轴的最终度数,以度数的方式给出。0是北 };
Ejemplos
Nombre del archivo: highcharts_guage_solid.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> <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>
La salida del ejemplo anterior es: