하이 차트 : 차트를 움직이는 원시 데이터의 Excel 또는 CSV를 사용자에게 내보낼 수 있습니까?

Question

WP AdCenter 플러그인을 통해 HighCharts를 통해 생성 된 차트가 있습니다. 사용자 (관리자 및 구독자 모두)가 차트의 PNG, JPG 또는 PDF 이미지뿐만 아니라 Excel 또는 CSV로 차트를 구동하는 원시 데이터를 다운로드 할 수 있기를 바랍니다. 코드 수정을 심각하게하지 않고도이 작업을 수행 할 수있는 방법이 있습니까 (필자는 PHP 프로그래머가 아닙니다). 이 추가 내보내기 옵션은 가까운 미래에 출시 될 수있는 기능입니까?

Answer 1

이 jsfiddle은 하이 차트에서 Excel을 만드는 데 도움이됩니다. 다운로드 CSV 옵션이 내보내기 메뉴에 제대로 추가되었습니다. 그냥 통과하면 자신이 더 잘할 것입니다. 여기

코드입니다 :

/** 
* A small plugin for getting the CSV of a categorized chart 
*/ 
(function (Highcharts) { 

    // Options 
    var itemDelimiter = ',', // use ';' for direct import to Excel 
     lineDelimiter = '\n'; 

    var each = Highcharts.each; 
    Highcharts.Chart.prototype.getCSV = function() { 
     var xAxis = this.xAxis[0], 
      columns = [], 
      line, 
      csv = "", 
      row, 
      col; 

     if (xAxis.categories) { 
      columns.push(xAxis.categories); 
      columns[0].unshift(""); 
     } 
     each (this.series, function (series) { 
      columns.push(series.yData); 
      columns[columns.length - 1].unshift(series.name); 
     }); 

     // Transform the columns to CSV 
     for (row = 0; row < columns[0].length; row++) { 
      line = []; 
      for (col = 0; col < columns.length; col++) { 
       line.push(columns[col][row]); 
      } 
      csv += line.join(itemDelimiter) + lineDelimiter; 
     } 
     return csv; 
    };  
}(Highcharts)); 

// Now we want to add "Download CSV" to the exporting menu. We post the CSV 
// to a simple PHP script that returns it with a content-type header as a 
// downloadable file. 
// The source code for the PHP script can be viewed at 
// https://raw.github.com/highslide-software/highcharts.com/master/studies/csv-export/csv.php 

Highcharts.getOptions().exporting.buttons.contextButton.menuItems.push({ 
    text: 'Download CSV', 
    onclick: function() { 
     Highcharts.post('http://www.highcharts.com/studies/csv-export/csv.php', { 
      csv: this.getCSV() 
     }); 
    } 
}); 



var chart = new Highcharts.Chart({ 

    chart: { 
     renderTo: 'container' 
    }, 

    xAxis: { 
     categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
    }, 

    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] 
    }] 

}); 

$('#getcsv').click(function() { 
    alert(chart.getCSV()); 
}); 

Answer 2

HighCharts의 범위를 벗어날 수 있습니다. series.data 값이 무엇인지 파악하고 반복하여 페이지의 자바 스크립트 내에서 CSV를 만들 수 있습니다. 아니면 백엔드에서 미리 할 수 ​​있습니다.

Answer 3

내보내기 버튼 (http://api.highcharts.com/highcharts#exporting.buttons.contextButton.onclick)을 추가하고 chart.series 객체에 보관 된 모든 값을 차트에서 가져 와서 string/array로 푸시 할 수있는 함수를 준비 할 수 있습니다. 그렇다면 javascript에서 파일을 "생성"하는 방법을 찾고 배열/문자열로 채울 필요가 있습니다.