Highcharts多个Y轴绘图带碰撞

Highcharts multiple yaxis plotband collision

本文关键字:碰撞 绘图 多个 Highcharts      更新时间:2023-09-26

我一直在尝试使用多个y轴的角度规。我使用了偏移轴属性来避免它们之间的碰撞。然而,轴线相互碰撞的情节带。是否有任何属性将它们分离或任何其他变通方法?

我的尝试:

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'gauge',
            plotBackgroundColor: null,
            plotBackgroundImage: null,
            plotBorderWidth: 0,
            plotShadow: false
        },
        title: {
            text: 'Speedometer'
        },
        pane: {
            startAngle: -90,
            endAngle: 90,
            background: null
        },
        // the value axis
        yAxis:[
        {
            min: 0,
            max:100,
            minorTickInterval: 'auto',
            minorTickWidth: 1,
            minorTickLength: 10,
            minorTickPosition: 'inside',
            minorTickColor: '#666',
                  labels: {
                distance: 12,
                rotation: 'auto'
            },
            offset: -30,
            tickPixelInterval: 30,
            tickWidth: 2,
            tickPosition: 'inside',
            tickLength: 10,
            tickColor: '#666',
            labels: {
                step: 2,
                rotation: 'auto'
            },
             plotBands: [{
                from: 0,
                to: 10,
                color: '#55BF3B',
            }, {
                from: 10,
                to: 70,
                color: '#DDDF0D',
            }, {
                from: 70,
                to: 90,
                color: '#DF5353',  
            }]

        },
         {
            min: 0,
            max:100,
            minorTickInterval: 'auto',
            minorTickWidth: 1,
            minorTickLength: 10,
            minorTickPosition: 'inside',
            minorTickColor: '#666',
                  labels: {
                distance: 12,
                rotation: 'auto'
            },
            offset: 30,
            tickPixelInterval: 30,
            tickWidth: 2,
            tickPosition: 'inside',
            tickLength: 10,
            tickColor: '#666',
            labels: {
                step: 2,
                rotation: 'auto'
            },
             plotBands: [{
                from: 0,
                to: 10,
                color: 'red',
                offset:30,// green
            }, {
                from: 10,
                to: 70,
                color: 'orange' // yellow
            }, {
                from: 70,
                to: 90,
                color: 'violet' // red
            }]

        }
        ],
        series: [{
            name: 'Speed',
             data: [{
                id: 'hour',
                y: 90,
            }],
        },{
        name: 'Speed',
             data: [{
                id: 'minute',
                y: 50,
            }],
        },
        ]
    },

    // Add some life
    function (chart) {
        if (!chart.renderer.forExport) {
            setInterval(function () {
            }, 3000);
        }
    });
        $('.highcharts-axis text').click(function(){                                      alert($(this).text());  
        }); 
});

https://jsfiddle.net/n1djkxLr/8/

此问题与know bug有关,在此处向我们的开发人员报告:https://github.com/highcharts/highcharts/issues/5283