如何在highCharts中添加自定义导出按钮？

我们在我们的应用程序中使用了highcharts，我想在打印和导出按钮旁添加一个按钮。我确实有 jsfiddle 如何在highCharts中添加自定义导出按钮？

var chart1; 
     $(document).ready(function() { 

      // Add Custom button to highchart 
      chart1 = new Highcharts.Chart({ 
       chart: { 
        renderTo: 'container1', 
        shadow: true 
       }, 
       title: { text: 'Sales' }, 
       xAxis: { 
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
           'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
       }, 
       yAxis: { title: { text: '$'} }, 
       series: [{ 
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 
          135.6, 148.5, 216.4, 194.1, 95.6, 54.4] 
       }], 
       exporting: { 
         buttons: { 
          'exportTo': { 
           _id: 'exportTo', 
           symbol: 'diamond', 
           x: -62, 
           symbolFill: '#B5C9DF', 
           hoverSymbolFill: '#779ABF', 
           onclick: function() { 
            showDialog(this); 
           } 
          } 
         } 
        } 

      }); 


var showDialog = function (selectedChart) { 

       var modal = $("#myModal").modal(); 
       $('#btnSaveImage').click(function() { 
        saveChartInNas(selectedChart); 
        modal.modal('hide'); 
       }); 
      }; 
     });

我们有很多的图表工作示例，图表上的点击我要显示一个模式窗口，并做保存按钮一些过程。而不是创建所有不同页面中的所有图表的模态和导出属性设置，我想知道是否有可能某种插件或附加？如果是这样，有人可以告诉我如何实现这一点。

我不想在所有的网页添加出口逻辑。

谢谢

来源

2013-03-18 Think

的[管理多个highchart图表在单个网页（http://stackoverflow.com/questions/8253590/manage-multiple-highchart-charts-in-a-single-webpage） – 2013-03-19 00:55:48

图表可能重复在不同的页面中可用。如何为所有页面中的所有图表编写通用设置？ – Think 2013-03-20 22:30:37

我想你是问是否有其设置为某种形式的违约，编辑每一个图表定义的instad的方法吗？

您应该看看Highcharts.setOptions（）http://api.highcharts.com/highcharts#Highcharts.setOptions() 这允许您为所有图表设置默认值。

来源

2013-03-19 09:20:49 SteveP

exporting: { 
          filename: 'event-id-metadata-graph', 
          buttons: { 
           contextButton: { 
            menuItems: [{ 
             text: 'Download PDF', 
             onclick: function() { 
              this.exportChart({ 
               type: 'application/pdf' 
              }); 
             } 
            }, { 
             text: 'Print', 
             onclick: function() { 
               alert('Launch Print Table function') 
             }, 
             separator: false 
            }] 
           } 
          } 
         },

来源

2017-05-23 14:40:21

如何在highCharts中添加自定义导出按钮？

回答

相关问题