Highcharts Wägungsdurchführungsplan
Highcharts Wägungsdurchführungsplan
Das folgende Beispiel zeigt das Messdiagramm.
Im vorigen Abschnitt wissen wir bereits Highcharts Basiskonfiguration Syntax. Schauen wir uns die anderen Konfigurationen zu suchen.
Konfiguration
chart.type Konfiguration
Konfigurieren Sie den Typ des Diagramms 'gauge'. chart.type beschreibt den Diagrammtyp. Der Standardwert ist "Linie".
var chart = { type: 'guage' };
Konfigurieren Bereich
Scheibe ist in Polarplot und Winkelmessgerät zur Verfügung. Dieses konfigurierbare Objekt enthält allgemeine Optionen Kombination x-Achse und y-Woche. Jede x-Achse und y-Achse kann mit der Scheibe durch den Index verknüpft werden.
var pane = { startAngle: -150, // x轴或测量轴的开始度数,以度数的方式给出。0是北 endAngle: 150 //x轴极坐标或角度轴的最终度数,以度数的方式给出。0是北 };
Beispiele
Dateiname: highcharts_guage_angular.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 title = { text: '车速表' }; var pane = { startAngle: -150, endAngle: 150, background: [{ backgroundColor: { linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, stops: [ [0, '#FFF'], [1, '#333'] ] }, borderWidth: 0, outerRadius: '109%' }, { backgroundColor: { linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, stops: [ [0, '#333'], [1, '#FFF'] ] }, borderWidth: 1, outerRadius: '107%' }, { // default background }, { backgroundColor: '#DDD', borderWidth: 0, outerRadius: '105%', innerRadius: '103%' }] }; // the value axis var yAxis = { min: 0, max: 200, minorTickInterval: 'auto', minorTickWidth: 1, minorTickLength: 10, minorTickPosition: 'inside', minorTickColor: '#666', tickPixelInterval: 30, tickWidth: 2, tickPosition: 'inside', tickLength: 10, tickColor: '#666', labels: { step: 2, rotation: 'auto' }, title: { text: 'km/h' }, plotBands: [{ from: 0, to: 120, color: '#55BF3B' // green }, { from: 120, to: 160, color: '#DDDF0D' // yellow }, { from: 160, to: 200, color: '#DF5353' // red }] }; var series= [{ name: 'Speed', data: [80], tooltip: { valueSuffix: ' km/h' } }]; var json = {}; json.chart = chart; json.title = title; json.pane = pane; json.yAxis = yAxis; json.series = series; // Add some life var chartFunction = function (chart) { if (!chart.renderer.forExport) { 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>
Das obige Beispiel Ausgabe lautet: