C3 :选择csv列输入
如何从包含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>回答 1
Stack Overflow用户
发布于 2017-01-20 09:36:59
看看我在jsfiddle上搞砸的这个例子(下面的代码)。
http://jsfiddle.net/Lpatkpj1/
我加载csv，然后.row函数将每一行过滤成一种新格式(数组，而不是对象)，在途中只选择两列，然后在.get中返回这些列(csv示例在web上非常方便)。然后使用unshift将数据的名称添加到行数组的前面。一个非常小的c3.generate就可以使用rows:选项显示这个信息，您想要的任何其他信息都可以添加到上面。
d3.csv("https://raw.githubusercontent.com/stedy/Machine-Learning-with-R-datasets/master/usedcars.csv")
.row(function(d) { return [d.price, d.mileage]; })
.get(function(error, rows) {
rows.unshift (["Price", "Mileage"])
var chart = c3.generate({
data: {
rows: rows,
type: 'line'
},
});
});“从那以后，我发现d3.csv是d3发行版中的一个单独的文件”--可以是这样，但是您可以将d3.js打包起来，包括csv功能。请记住，c3目前不使用v4 of d3，只有v3 - https://github.com/c3js/c3/issues/1648。
https://stackoverflow.com/questions/41707257
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号