Highcharts-ng为车速表添加自定义按钮

时间:2016-05-02 10:25:46

标签: angularjs highcharts

我正在使用angularjs highcharts-ng

https://github.com/pablojim/highcharts-ng

我需要在车速表上添加一个自定义按钮。 我发现了这个: Add buttons in chart of Highcharts at runtime

 exporting: {
        buttons: {
            customButton: {
                text: 'Custom Button',
                onclick: function () {
                    alert('You pressed the button!');
                }
            }
        }
    }

但这对我不起作用:

$scope.highchartsNG = {
        options: {
            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%'
                }]
            }
        },
  exporting: {
        buttons: {
            customButton: {
                text: 'Custom Button',
                onclick: function () {
                    alert('You pressed the button!');
                }
            }
    }
    },          
        yAxis: {
            min: 0,
            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: 120,
                color: '#55BF3B' // green
            }, {
                from: 120,
                to: 160,
                color: '#DDDF0D' // yellow
            }, {
                from: 160,
                to: 200,
                color: '#DF5353' // red
            }]        
        },
      buttons: {
                customButton: {
                    text: 'Custom Button'
                }
            }
        ,      
        series: [{
            name: 'Speed',
            data: [80],
            tooltip: {
                valueSuffix: ' km/h'
            }
        }],

    };

http://jsfiddle.net/76dLm8h7/3/

我试图添加"导出"数组内不同位置的选项,但确实有效。

任何帮助都将不胜感激。 提前谢谢。

0 个答案:

没有答案