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;

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 here的更多信息。

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

1 个答案: