Exporting more than one HighCharts to excel

2019-03-03 14:53发布

问题:

I am using HighCharts. Now just by clicking on export EXCEL only one chart data is exported to excel.if i put one or more charts i want all those charts data in one EXCEL but it displaying only one chart data in EXCEL What should I do to get this? can anyone please help on this here is my Code: HTML:

<script src="/jquery/dist/jquery.min.js"></script>
<script src="/bower_components/highcharts/highcharts.js"></script>
<script src="/bower_components/highcharts/modules/exporting.js"></script>
<script src="/bower_components/highcharts/modules/canvas-tools.js"></script>
<script src="/bower_components/export-csv/export-csv.js"></script>
<script type="application/javascript" src="/highcharts-export-clientside/bower_components/jspdf/dist/jspdf.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<!-- Export Client-Side module -->
<script src="/bower_components/highcharts-export-clientside/highcharts-export-clientside.js"></script>

    <div class="highcharts-container" id="example-1"></div>
    <div class="highcharts-container" id="example-2"></div>

    <!-- Buttons -->

       <button id="exportExcel" type="button" class="btn btn-default" data-type="application/vnd.ms-excel">XLS</button>



    JavaScript:

    // Defining the chart
    $('#example-1').highcharts({
      title: {
        text: 'Monthly Average Temperature',
        x: -20 //center
      },
      subtitle: {
        text: 'Source: WorldClimate.com',
        x: -20
      },
      xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
        'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
        ]
      },
      yAxis: {
        title: {
          text: 'Temperature (°C)'
        },
        plotLines: [{
          value: 0,
          width: 1,
          color: '#808080'
        }]
      },
      exporting: {
        buttons: {
            contextButton: {
            menuItems: options
          }
        }
      },
      tooltip: {
        valueSuffix: '°C'
      },
      legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle',
        borderWidth: 0
      },
      series: [{
        name: 'Tokyo',
        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
      }, {
        name: 'New York',
        data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
      }, {
        name: 'Berlin',
        data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
      }, {
        name: 'London',
        data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
      }]
    });



    $('#example-2').highcharts({
      title: {
        text: 'Monthly Average Temperature',
        x: -20 //center
      },
      subtitle: {
        text: 'Source: WorldClimate.com',
        x: -20
      },
      xAxis: {
        categories: ['Sreekanth', 'Nenuuu', 'Mar', 'Apr', 'May', 'Jun',
        'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
        ]
      },
      yAxis: {
        title: {
          text: 'Temperature (°C)'
        },
        plotLines: [{
          value: 0,
          width: 1,
          color: '#808080'
        }]
      },
      exporting: {
        buttons: {
            contextButton: {
            menuItems: options
          }
        }
      },
      tooltip: {
        valueSuffix: '°C'
      },
      legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle',
        borderWidth: 0
      },
      series: [{
        name: 'Tokyo',
        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
      }, {
        name: 'New York',
        data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
      }, {
        name: 'Berlin',
        data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
      }, {
        name: 'London',
        data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
      }]
    });

    $('#exportExcel').click(function(){
    var chart1 = $('#example-1').highcharts();
    var chart2= $('#example-2').highcharts();
    var chart=Object.assign(chart1,chart2);

    chart.exportChartLocal({ type: 'application/vnd.ms-excel'});
    //char2.exportChartLocal({ type: 'application/vnd.ms-excel'});
    });

回答1:

Highcharts export-data module adds getDataRows method to chart's prototype. It is responsible for collecting and returning the data that'll be used in exported file. You can modify it so that it returns the data from all charts instead of one.

each(H.charts, function(chart) { // loop added - H.charts refers to all charts
  each(chart.series, function(series) { // 'this' changed to 'chart'
    var keys = series.options.keys,
      pointArrayMap = keys || series.pointArrayMap || ['y'],

Live demo: http://jsfiddle.net/BlackLabel/hgq2vzb4/

Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts