Load csv file Example #4957
Comments
|
PS. Knowing how to load csv file into a variable is vitally important to me, as most examples in http://echarts.baidu.com/demo.html are not written in same the way as using |
<!DOCTYPE html>
<!-- https://ecomfe.github.io/echarts/doc/start.html#main1 -->
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:400px"></div>
<!-- ECharts单文件引入 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.4.0/echarts.min.js"></script>
<script src="http://gallery.echartsjs.com/dep/jquery/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.1.2/papaparse.min.js"></script>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts图表
var myChart = echarts.init(document.getElementById('main'));
<!-- !!! Code !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
// 2x轴+数据列
// 细粒度数据，必须根据主分类排序
// var dataURL = "Country-Populations.csv";
var dataURL = "https://raw.githubusercontent.com/suntong/lang/master/lang/Charts/ECharts/Country-Populations.csv";
var dummy = [
['2015冬','1月',Math.random()*10,Math.random()*10],
['2015冬','2月',Math.random()*20,Math.random()*20],
['2016春','3月',Math.random()*50,Math.random()*50],
['2016春','4月',Math.random()*100,Math.random()*100],
['2016春','5月',Math.random()*150,Math.random()*150],
['2016夏','6月',Math.random()*200,Math.random()*200],
['2016夏','7月',Math.random()*250,Math.random()*250],
['2016夏','8月',Math.random()*200,Math.random()*200],
['2016秋','9月',Math.random()*150,Math.random()*150],
['2016秋','10月',Math.random()*100,Math.random()*100],
['2016秋','11月',Math.random()*20,Math.random()*20],
['2016冬','十二月',Math.random()*10,Math.random()*10]
];
function GetFromCVS(csvContent) {
return Papa.parse(csvContent).data;
}
$.get(dataURL, function (csvContent) {
var dummy = GetFromCVS(csvContent);
// 元数据处理，e.g. metadata.init().xxx
var metadata = {
flag: true,
quarter: [],
month: [],
data1: [],
data2: [],
data3: [],
x_major_offset: dummy[0][1].length,
init: function() {
// 首次初始化
if (metadata.flag) {
// 数据遍历
for (var i = 0; i < dummy.length; i++) {
//debugger;
if (i === 0) {
metadata.quarter.push(dummy[i][0]);
} else {
// 与子分类列匹配
metadata.quarter.push(dummy[i-1][0] === dummy[i][0] ? '' : dummy[i][0]);
}
metadata.month.push(dummy[i][1]);
metadata.data1.push(dummy[i][2]);
metadata.data2.push(dummy[i][3]);
metadata.data3.push('');
// 计算子分类字符长度（按汉字计算，*12号字体）
metadata.x_major_offset = metadata.x_major_offset > dummy[i][1].length ? metadata.x_major_offset : dummy[i][1].length;
}
metadata.flag = false;
}
return metadata;
}
};
option = {
tooltip: {
axisPointer: {
type: 'shadow'
},
trigger: 'axis'
},
grid: {
bottom: metadata.init().x_major_offset * 12 + 30
},
legend: {
data:['Populations1','Populations2']
},
xAxis: [
{
type: 'category',
axisLine: {show: false},
axisTick: {show: false},
axisLabel: {
rotate: 90
},
splitArea: {show: false},
data: metadata.init().month
},
{
type: 'category',
position: 'bottom',
offset: metadata.init().x_major_offset * 12,
axisLine: {show: false},
axisTick: {
length: metadata.init().x_major_offset * 12 + 20,
lineStyle: {color: '#CCC'},
interval: function (index, value) {
return value!=='';
}
},
splitArea: {
show: true,
interval: function (index, value) {
return value!=='';
}
},
data: metadata.init().quarter
}
],
yAxis: [
{
type: 'value',
name: 'Populations',
min: 0,
max: 250,
interval: 50,
axisLabel: {
formatter: '{value} ml'
}
}
],
series: [
{
name:'Populations1',
type:'bar',
z: 1,
data: metadata.init().data1
},
{
name:'Populations2',
type:'bar',
z: 1,
data: metadata.init().data2
},
{
type:'line',
xAxisIndex: 1,
z: 0,
data: metadata.init().data3
}
]
}
<!-- !!! Code !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
// 为echarts对象加载数据
myChart.setOption(option);
});
</script>
</body> |
|
Oh, thank you, thank you very much! Two problems:
Moreover, the Thanks again. |
|
|
Oh, thanks for looking into it. I'll revisit it next week or after next, and report back. Thx again. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Following on issues #4945, I'm still not quite sure how to use the csv file loading function, because I'm not a JavaScript programmer. For e.g., I'm trying to convert this echarts_Multiple-Sub-Groups-Bar-Chart_1 file to echarts_Multiple-Sub-Groups-Bar-Chart_2, but got really stuck.
I.e., could you show us how to load csv file into a variable please? I.e., fixing the following line:
var dummy = GetFromCVS(dataURL)PS. I appreciate if you can make echarts_Multiple-Sub-Groups-Bar-Chart_2 a fully working example as I'm not a JavaScript programmer so it's very hard for me to do it. Also, the code currently only handle two columns/bars, however the csv files has more. if you can make it dynamic according to the data available in the csv files, that'd be even more appreciated.
And finally, the reason I'm asking to make echarts_Multiple-Sub-Groups-Bar-Chart_2 a fully working example, is because normally we would uses csv columns as-is. I.e., I know the following is very advanced and useful,
data: calculateMA(5, data),however, when it comes to using csv columns as-is, the mostly widely use case, I still have no idea.
Thanks a lot
The text was updated successfully, but these errors were encountered: