如何从包含1200行和13列的csv数据文件中选择将在C3.js中绘制哪些列。 附录:我编辑了文件并进行了更改。该文件有效。所有问题都已解决有关一般信息,我从JSFiddle页面的副本中检索了基本文档。显然,每个JSFiddle页面源代码都包含指向JSFiddle上代码的两个(离线)功能副本的链接。 JSFiddle页面中编写的代码无法脱机工作。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<script type="text/javascript" src="./resources/d3.v3.min.js"></script>
<script type="text/javascript" src="./resources/c3.js"></script>
<link rel="stylesheet" type="text/css" href="./resources/c3.css">
<style type="text/css"></style>
<title>once again</title>
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
d3.csv("./data/dataXY_11-21-2016.csv")
.row(function(d) { return [d.time12, d.PVpower, d.Elevation]; })
.get(function(error,rows) {
rows.unshift (["time 12", "PV array power(W)", "Elevation"])
console.log(rows);
var chart = c3.generate({
size:{
width: 1000,
height: 400
},
bindto: '#chart',
data: {
rows: rows,
type: 'line',
x: 'time 12',
xFormat:'%I:%M:%S %p'
},
point: {show: false},
tooltip: {show: false},
axis: {
x: {
localtime: true,
type:'timeseries',
tick:{
//culling:{max: 50},
fit: true,
count: 50,
format: '%I:%M:%S %p',
rotate: 65,
}//end tick
},//end x
y: {
max: 350,
min: 0
} //end y
},//end axis
grid:{
x:{
show: true
},//end x
y:{
show: true
}//end y
}//end grid
});
});
}//]]>
</script>
<body>
<div id="chart"></div>
<script>
if (window.parent && window.parent.parent){
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: "None"
}], "*")
}
</script>
</body>
</html>
答案 0 :(得分:0)
看看我在jsfiddle(下面的代码)
上搞砸了的这个例子我加载了csv,.row
函数然后将每一行过滤成一种新的格式(数组而不是对象),在路上只挑选两列,然后全部返回{{1 (csv示例只是在网络上很方便的一个例子)。然后我使用unshift将数据的名称添加到rows数组的前面。然后,一个非常小的c3.generate可以使用.get
选项显示此信息,您可以添加任何其他内容。
rows:
“我有,因为,发现d3.csv是d3发行版中的一个单独的文件” - 它可以,但是你可以将d3.js捆绑在一起,包括csv功能。请记住,c3目前不适用于d3的v4,只有v3 - https://github.com/c3js/c3/issues/1648。