我正在尝试 highcharts 饼图。它在代码本身中提供数据时有效但是当我尝试使用外部 csv 文件时,它没有绘图。我有一个 csv 文件,其中包含如下条目:
a,10
b,20
这是我的代码:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var d = [];
var options = {
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Test Graph'
},
plotOptions: {
pie: {
cursor: 'pointer',
allowPointSelect: true,
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
series: [{
type: 'pie',
name: 'Test',
data: d
}]
};
$.get('test.csv',function(data) {
var rows = data.split('\n');
for(var i=0; i<rows.length; i++) {
var arr = rows[i].split(',');
d.push([arr[0],parseFloat(arr[1])]);
}
var chart = new Highcharts.Chart(options);
});
});
</script>
</head>
<body>
<script src="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
换行时:
var rows = data.split('\n');
至
var rows = "a,10\nb,20".split('\n');
有用。