带Highcharts.js的圆边测量仪 [英] Rounded edges Gauge with Highcharts.js

问题描述

我使用Highcharts来创建一个自定义量表，窗格的形状应该随附的图片四舍五入，想知道是否有人有关于如何使用库来实现此布局的想法

这是我使用的

I am using Highcharts to create a custom gauge, the pane shape should be rounded as the attached pic, wondering if anyone has an idea of how to implement this layout using the library

This is the http://jsfiddle.net/ao9fv2yh/ I am using as a starting point.

$(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: '<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'
        }
    }]

}));

// The RPM gauge
$('#container-rpm').highcharts(Highcharts.merge(gaugeOptions, {
    yAxis: {
        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'
        }
    }]

}));

// 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 < 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);
    }
}, 2000);

});

And this is the layout of the custom gauge:

Thanks for the help!

解决方案

It is probably more correct to create a proper extension to Highcharts, but it's possible if you add wide borders to the gauge elements and tweak the SVG like this:

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');
    }
}

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

这篇关于带Highcharts.js的圆边测量仪的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！