同じページの複数のチャートハイチャート

Question

ハイチャートを使用していますが、現在、ページ内の複数のチャートに問題があります。問題は軽微ですが、私は両方のチャートでbtnをダウンロードして印刷する2つのチャートを持っていますが、最初のダウンロードではbtnは正常に動作しますが、次のものは動作しません。ここに私の問題は、http://jsfiddle.net/metalhead101/7f4194th/

JS

$(function() { 
    // Create the first chart 
    $('#chart-A').highcharts({ 
     chart: { 
      type: 'column' // Chart type (i.e. 'bar', 'column', 'spline' etc) 
     }, 
     title: { 
      text: 'Chart A' // Title for the chart 
     }, 
     xAxis: { 
      categories: ['Jane', 'John', 'Joe', 'Jack', 'jim'] 
      // Categories for the charts 
     }, 
     yAxis: { 
      min: 0, // Lowest value to show on the yAxis 
      title: { 
       text: 'Apple Consumption' // Title for the yAxis 
      } 
     }, 
     legend: { 
      enabled: false // Enable/Disable the legend 
     }, 
     credits: { 
      enabled: true, // Enable/Disable the credits 
      text: 'This is a credit' 
     }, 
     tooltip: { 
      shared: true // If you have multiple series then all points in each category will show up on one tooltip 
     }, exporting: { 
      buttons: { 
       contextButton: { 
        enabled: false 
       }, 
       exportButton: { 
        text: 'Download', 
        theme: { 
         fill: '#eee', 
         stroke: '#fff', 
         states: { 
          hover: { 
           fill: '#fff', 
           stroke: '#eee' 
          }, 
          select: { 
           fill: '#ddd', 
           stroke: '#0f0' 
          } 
         } 
        }, 
        _titleKey: 'contextButtonTitle', 
        // Use only the download related menu items from the default context button 
        menuItems: Highcharts.getOptions().exporting.buttons.contextButton.menuItems.splice(2) 
       }, 
       printButton: { 
        text: 'Print', 
        theme: { 
         fill: '#eee', 
         stroke: '#fff', 
         states: { 
          hover: { 
           fill: '#fff', 
           stroke: '#eee' 
          }, 
          select: { 
           fill: '#ddd', 
           stroke: '#0f0' 
          } 
         } 
        }, 
        _titleKey: 'printChart', 
        onclick: function() { 
         this.print(); 
        } 
       } 
      } 
     }, 
     series: [{ 
      name: 'Apples', // Name of your series 
      data: [5, 3, 8, 2, 4] // The data in your series 

     }] 
    }); 

    $('#chart-B').highcharts({ 
     chart: { 
      type: 'column' 
     }, 
     title: { 
      text: 'Chart B' 
     }, 
     xAxis: { 
      categories: ['Jane', 'John', 'Joe', 'Jack', 'jim'] 
     }, 
     yAxis: { 
      min: 0, 
      title: { 
       text: 'Miles during Run' 
      } 
     }, 
     legend: { 
      enabled: false 
     }, 
     credits: { 
      enabled: true, 
      text: 'You can have a link in here too', 
      href: 'http://www.google.com' 
     }, 
     tooltip: { 
      shared: true 
     }, exporting: { 
      buttons: { 
       contextButton: { 
        enabled: false 
       }, 
       exportButton: { 
        text: 'Download', 
        theme: { 
         fill: '#eee', 
         stroke: '#fff', 
         states: { 
          hover: { 
           fill: '#fff', 
           stroke: '#eee' 
          }, 
          select: { 
           fill: '#ddd', 
           stroke: '#0f0' 
          } 
         } 
        }, 
        _titleKey: 'contextButtonTitle', 
        // Use only the download related menu items from the default context button 
        menuItems: Highcharts.getOptions().exporting.buttons.contextButton.menuItems.splice(2) 
       }, 
       printButton: { 
        text: 'Print', 
        theme: { 
         fill: '#eee', 
         stroke: '#fff', 
         states: { 
          hover: { 
           fill: '#fff', 
           stroke: '#eee' 
          }, 
          select: { 
           fill: '#ddd', 
           stroke: '#0f0' 
          } 
         } 
        }, 
        _titleKey: 'printChart', 
        onclick: function() { 
         this.print(); 
        } 
       } 
      } 
     }, 
     series: [{ 
      name: 'Miles', 
      data: [2.4, 3.8, 6.1, 5.3, 4.1] 

     }] 
    }); 
}); 

あるおかげでたくさん...

Answer 1

あなたが

var buttons = Highcharts.getOptions().exporting.buttons.contextButton.menuItems; 

として最初のボタンを定義する必要がありますし、各highchartsで

をこの buttonsを使用します

exporting: { 
     buttons: { 
      exportButton: { 
       text: 'Download', 
       theme: { 
        fill: '#eee', 
        stroke: '#fff', 
        states: { 
         hover: { 
          fill: '#fff', 
          stroke: '#eee' 
         }, 
         select: { 
          fill: '#ddd', 
          stroke: '#0f0' 
         } 
        } 
       }, 
       _titleKey: 'contextButtonTitle', 
       // Use only the download related menu items from the default context button 
       menuItems:buttons.slice(2) 
      }, 
     } 
     } 

Forked Fiddle