Highcharts在配置中创建自定义按钮

Question

有没有一种方法可以利用Highcharts配置对象创建自定义按钮而不使用导出功能？

下面的方法将使用代码的最后几行程序添加按钮（在return语句之前），但我希望仅通过配置来处理此操作。

    var options = {
            chart: {
                renderTo: container,
                zoomType: 'x',
                spacingBottom: 20,
                type: 'column'
            },
            legend: {
                layout: 'vertical',
                verticalAlign: 'top',
                align: 'right'
            },
            tooltip: {
                shared: true,
                crosshairs: true,
                xDateFormat: '%b %e, %l:%M %p'
            },
            series: [
                { 
                    "name": "Excellent",
                    "color": config.color.excellent,
                    "data": dataE,
                    "pointWidth": pointWidth ? pointWidth : undefined
                },
                { 
                    "name": "Fair",
                    "color": config.color.fair,
                    "data": dataF,
                    "pointWidth": pointWidth ? pointWidth : undefined 
                },
                { 
                    "name": "Poor",
                    "color": config.color.poor,
                    "data": dataP,
                    "pointWidth": pointWidth ? pointWidth : undefined 
                }
            ],
            exporting: {
                enabled: false
            }
        }

        // Adds new button below
        var chart = new Highcharts.Chart(options);
        var custombutton = chart.renderer.button('button', 74, 10, function(){
            alert('New Button Pressed');
        },null,null,null).add();
        return chart;

- NealR

Answer 1

如果没有导出模块，是不可能实现的。但是您可以使用该模块并定义自己的自定义按钮，这些按钮与导出功能毫无关系。

exporting: {
        buttons: [{
          text: 'custom button',
          onclick: function () {
            alert('clicked');
          },
          theme: {
                'stroke-width': 1,
                stroke: 'silver',
                r: 0,
                states: {
                    hover: {
                        fill: '#a4edba'
                    },
                    select: {
                        stroke: '#039',
                        fill: '#a4edba'
                    }
                }
            }
        }]
    }

示例： http://jsfiddle.net/upt4cbqj/

您还可以使用新的配置选项扩展Highcharts，这将允许您在没有导出模块的情况下定义选项中的按钮。有关扩展Highcharts的更多信息，请单击此处。

- morganfree