HighCharts：显示 3 个 vu-meters

Question

我尝试在一次调用中显示 3 个音量计，但是 2 号和 3 号音量计 一个在另一个之上.

有没有办法一次显示3个vu表，或者组件被锁定了？

Answer 1

您需要定义额外的 pane、yAxis 和 series:

    pane: [{
        startAngle: -45,
        endAngle: 45,
        background: null,
        center: ['20%', '145%'],
        size: 300
    }, {
        startAngle: -45,
        endAngle: 45,
        background: null,
        center: ['50%', '145%'],
        size: 300
    }, {
        startAngle: -45,
        endAngle: 45,
        background: null,
        center: ['80%', '145%'],
        size: 300
    }],

    yAxis: [{
        min: -20,
        max: 6,
        minorTickPosition: 'outside',
        tickPosition: 'outside',
        labels: {
            rotation: 'auto',
            distance: 20
        },
        plotBands: [{
            from: 0,
            to: 6,
            color: '#C02316',
            innerRadius: '100%',
            outerRadius: '105%'
        }],
        pane: 0,
        title: {
            text: 'VU<br/><span style="font-size:8px">Channel A</span>',
            y: -40
        }
    }, {
        min: -20,
        max: 6,
        minorTickPosition: 'outside',
        tickPosition: 'outside',
        labels: {
            rotation: 'auto',
            distance: 20
        },
        plotBands: [{
            from: 0,
            to: 6,
            color: '#C02316',
            innerRadius: '100%',
            outerRadius: '105%'
        }],
        pane: 1,
        title: {
            text: 'VU<br/><span style="font-size:8px">Channel B</span>',
            y: -40
        }
    }, {
        min: -20,
        max: 6,
        minorTickPosition: 'outside',
        tickPosition: 'outside',
        labels: {
            rotation: 'auto',
            distance: 20
        },
        plotBands: [{
            from: 0,
            to: 6,
            color: '#C02316',
            innerRadius: '100%',
            outerRadius: '105%'
        }],
        pane: 2,
        title: {
            text: 'VU<br/><span style="font-size:8px">Channel B</span>',
            y: -40
        }
    }],

    series: [{
        name: 'Channel A',
        data: [-20],
        yAxis: 0
    }, {
        name: 'Channel B',
        data: [-20],
        yAxis: 1
    }, {
        name: 'Channel C',
        data: [-10],
        yAxis: 2
    }]

现场演示： https://jsfiddle.net/BlackLabel/43ft09mq/

API参考：https://api.highcharts.com/highcharts/series.gauge

HighCharts：显示 3 个 vu-meters

HighCharts: Displaying 3 vu-meters

javascript

highcharts

display