Bordi arrotondati Indicatore con Highcharts.js

Sto usando Highcharts per creare un indicatore personalizzato, la forma del riquadro deve essere arrotondata come l’immagine allegata, chiedendo se qualcuno ha un’idea di come implementare questo layout usando la libreria

Questo è il http://jsfiddle.net/ao9fv2yh/ Sto usando come punto di partenza.

$(function () { var gaugeOptions = { chart: { type: 'solidgauge' }, title: null, pane: { center: ['50%', '85%'], size: '140%', startAngle: -90, endAngle: 90, background: { backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE', innerRadius: '60%', outerRadius: '100%', shape: 'arc' } }, tooltip: { enabled: false }, // 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 } }, plotOptions: { solidgauge: { dataLabels: { y: 5, borderWidth: 0, useHTML: true } } } }; // The speed gauge $('#container-speed').highcharts(Highcharts.merge(gaugeOptions, { yAxis: { min: 0, max: 200, title: { text: 'Speed' } }, credits: { enabled: false }, series: [{ name: 'Speed', data: [80], dataLabels: { format: '
{y}
' + 'km/h
' }, tooltip: { valueSuffix: ' km/h' } }] })); // The RPM gauge $('#container-rpm').highcharts(Highcharts.merge(gaugeOptions, { yAxis: { min: 0, max: 5, title: { text: 'RPM' } }, series: [{ name: 'RPM', data: [1], dataLabels: { format: '
{y:.1f}
' + '* 1000 / min
' }, tooltip: { valueSuffix: ' revolutions/min' } }] })); // Bring life to the dials setInterval(function () { // Speed var chart = $('#container-speed').highcharts(), point, newVal, inc; if (chart) { point = chart.series[0].points[0]; inc = Math.round((Math.random() - 0.5) * 100); newVal = point.y + inc; if (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 5) { newVal = point.y - inc; } point.update(newVal); } }, 2000);

});

E questo è il layout del calibro personalizzato:

inserisci la descrizione dell'immagine qui

Grazie per l’aiuto!

Probabilmente è più corretto creare un’estensione corretta per Highcharts, ma è ansible aggiungere bordi ampi agli elementi di gauge e modificare SVG in questo modo:

 var svg; svg = document.getElementsByTagName('svg'); if (svg.length > 0) { var path = svg[0].getElementsByTagName('path'); if (path.length > 1) { // First path is gauge background path[0].setAttributeNS(null, 'stroke-linejoin', 'round'); // Second path is gauge value path[1].setAttributeNS(null, 'stroke-linejoin', 'round'); } } 

Esempio: http://jsfiddle.net/Penstrife/1s8sfqtn/

C’è un’opzione borderRadius nell’API che fa esattamente ciò che vuoi. Sfortunatamente questa opzione è solo per colonne, tooltip, legende ma non per solidgauge . Ecco la cosa più vicina che potrei ottenere: http://jsfiddle.net/ao9fv2yh/1/