3

この例のように、HighchartからCSVファイルをダウンロードできるようにしたいです。

JSFiddleへのリンク

私はそれを実装しようとしましたが、私のコードでは機能しません....理由は何でしょうか？csvにアラートを送信したいだけです。後で私はあなたがそれをダウンロードできることを実装したいと思います...

これが私のコードです：

<script language="javascript" type="text/javascript" src="../js/jquery-1.8.3.js">   </script>
<script language="javascript" type="text/javascript" src="../js/jquery-ui-1.9.2.custom.js"</script>
<script src="../js/highcharts.js "></script>
<script src="../js/exporting.js "></script>
<script src="../js/exporting.src.js "></script>
<link rel="stylesheet" href="../css/jquery-ui-1.9.2.custom.css" type="text/css" />

<script type="text/javascript">

(function (Highcharts) {
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(',') + '\n';
    }
    return csv;
};    
}(Highcharts));



$(function () {

$(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: { renderTo: 'container', type: 'pie' ,  },
        title: {   text: 'Top 5 Power consumer overall' },    
        yAxis: {  title: { text: ' ', }            },
        legend: { enabled: false },

       series: [{   name: 'Work',  data:[1,2,3,4,5] }],
    });
});

}); 


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


</script>
</head>
<body>
<div id="container"></div>
<button id="getcsv" > Alert </button>
</body>
</html>
4

1 に答える 1

1

あなたのコードはすでに機能しています：

cvsとしてダウンロードするには、次のコードブロックを追加します。

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

あなたのコードデモ

于 2013-02-07T09:23:03.540 に答える