2013-02-07 85 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

我的意思是这样的:''不是这样的:' ' –