Highcharts-ng，可以处理负值的量规

highcharts-ng, gauge that can handle negative values

本文关键字：处理 Highcharts-ng      更新时间：2023-09-26

我正在使用ng-highcharts，我正在尝试创建一个可以处理负值的衡量标准，我几乎达到了那里。但是，我希望0位于顶部(换句话说，我希望图表向右旋转90度)，并且由于某种原因，-200值被打印两次/重叠。我错过了什么/做错了什么?

http://jsfiddle.net/Hjdnw/2006/

这是它理想的样子，但我想在ng-highcharts中使用同样的东西，这样我就可以在我的angular应用程序中使用

http://jsfiddle.net/5rncm2nn/1/

我试着创建自己的指令，而不是使用ng-highcharts，它的工作如我所料。

也删除选项对象，它是包装图表对象在你的配置，这可能也会产生问题

使用这个配置

{
        chart: {
          type: 'gauge',
          plotBackgroundColor: null,
          plotBackgroundImage: null,
          plotBorderWidth: 0,
          plotShadow: false
        },
    title: {
        text: 'Speedometer'
    },
    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
    yAxis: {
        min: -200,
        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: 200,
            color: '#55BF3B' // green
        }, { from: -200,
            to: 0,
            color: '#DF5353' // red
        }]
    },
    series: [{
        name: 'Speed',
        data: [80],
        tooltip: {
            valueSuffix: ' km/h'
        }
    }]
}

和你的一样，只是去掉了options对象

Checkout this fiddle

http://jsfiddle.net/Hjdnw/2010/

相关文章：