javascript - 无法使用 CSV 数据绘制 Highchart 饼图
问题描述
我想用 CSV 文件数据绘制一个饼图,但什么也没得到。
我曾经Highcharts.ajax
从本地文件中读取数据,并将push
结果放入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>
解决方案
推荐阅读
- spring - Ionic / Angular App http请求在定位主机ip时无法使用Android模拟器/真实Android设备连接到Spring REST API
- android - ActivityScenario.launch 寻找一些缓存的 jar
- scrapy - 需要帮助以找到一种使用 xpath() 从头部获取某些东西的方法 [已解决]
- postgresql - JSONB字段过滤器特定对象中的Postgresql查询对象数组
- javascript - Google Directions API - 新请求后路线模糊
- entity-framework - 在实体框架中使用单个 .Include() 加载相关实体?
- prompt - Anaconda Prompt(Anaconda3) 无法识别目录中的文件
- pandas - 熊猫中的分组计算和枢轴函数
- angular - 将注入的服务引用和可观察对象传递给依赖注入之外的普通类
- .net - MassTransit/RabbitMQ 中的消息持久性