2013-02-07 134 views
2

我希望能夠從我的Highchart下載CSV文件......就像本例中一樣。無法從Highcharts獲得csv

Link to 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> 
+0

代碼警報CVS:http://jsfiddle.net/gyf9y/ .. –

回答

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() 
     }); 
    } 
}); 

YOUR CODE DEMO

+0

嘗試更新您的hightcharts js文件...您在演示中看到了您的代碼正在工作。 gicen demo是ypur代碼的複製粘貼。只有js文件是不同的。你能從'http://github.highcharts.com'獲得腳本嗎?例如... –

+0

嘿!我已經用github中的文件替換了我的文件。 – Susanne92

+0

我的意思是這樣的:''不是這樣的:' ' –