Javascript Can';t使用CSV数据绘制Highchart饼图
我想用CSV文件数据绘制饼图,但什么也得不到。Javascript Can';t使用CSV数据绘制Highchart饼图,javascript,highcharts,Javascript,Highcharts,我想用CSV文件数据绘制饼图,但什么也得不到。 我使用Highcharts.ajax从本地文件读取数据,并将结果推送到options.series。 这是我的测试CSV数据: BRCA,60 LUAD,30 LIHC,10 和JS代码: <div id="container2" style="width: 550px; height: 400px; margin: 0 auto"></div> <script language="JavaScript">
我使用
Highcharts.ajax
从本地文件读取数据,并将结果推送到options.series
。
这是我的测试CSV数据:BRCA,60
LUAD,30
LIHC,10
和JS代码:<div id="container2" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
var options = {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
defaultSeriesType: 'pie'
},
title: {
text: 'Browser market shares in January, 2018'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: []
};
Highcharts.ajax({
url: 'CSV_file_path',
dataType: 'text',
success: function(data) {
// Split the lines
var lines = data.split('\n');
var items = "";
var hash = {};
var series = [{
name: 'aaa',
colorByPoint: true,
data: []
}]
lines.forEach(function(line, lineNo) {
items = line.split(',');
if (lineNo < (lines.length - 1)) {
hash['name'] = items[0];
hash['y'] = items[1];
series[0].data.push(hash);
hash = {};
}
});
options.series = series;
alert(options.series[0].data[0].name)
Highcharts.chart('container2', options);
},
error: function (e, t) {
console.error(e, t);
}
});
</script>
变量选项={
图表:{
plotBackgroundColor:null,
plotBorderWidth:null,
影子:错,
defaultSeriesType:“派”
},
标题:{
文字:“2018年1月浏览器市场份额”
},
工具提示:{
pointFormat:“{series.name}:{point.percentage:.1f}%”
},
打印选项:{
馅饼:{
allowPointSelect:true,
光标:“指针”,
数据标签:{
启用:对,
格式:“{point.name}:{point.percentage:.1f}%”,
风格:{
颜色:(Highcharts.theme&&Highcharts.theme.ContractTextColor)| |“黑色”
}
}
}
},
系列:[]
};
Highcharts.ajax({
url:'CSV_文件_路径',
数据类型:“文本”,
成功:功能(数据){
//分道扬镳
变量行=data.split('\n');
var项目=”;
var hash={};
变量系列=[{
名称:“aaa”,
colorByPoint:对,
数据:[]
}]
lines.forEach(函数(行,行号){
项目=行分割(',');
如果(行号<(行长-1)){
散列['name']=项[0];
散列['y']=项[1];
系列[0]。数据。推送(哈希);
散列={};
}
});
options.series=系列;
警报(options.series[0]。数据[0]。名称)
Highcharts.chart('container2',选项);
},
错误:函数(e,t){
控制台错误(e,t);
}
});
任何控制台错误,或者您可以尝试使用哈希['y']=Number(items[1])
@Deep3015,我已经检查了哈希表中的每个项目,但没有发现任何错误。也许这种方式不合适,现在我使用的是CSV
函数,可以正常工作。您确定控制台中没有错误吗?我假设Highcharts
对象不包含ajax
函数。@KamilKulig,我是根据这个示例编写代码的: