87,993
社区成员
发帖
与我相关
我的任务
分享js里面读取一个TXT的数据作为dataset来画一个柱状图，但是读取不出来，求大神帮助
TXT文件中的数据格式为
10,66,45,23,90,
代码如下，应该是读取数据的问题，因为自己换一个数组就可以运行
10,66,45,23,90,
代码如下，应该是读取数据的问题，因为自己换一个数组就可以运行
<html>
<head>
<meta charset="utf-8">
<title>完整的柱形图</title>
</head>
<style>
.axis path,
.axis line{
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
.MyRect {
fill: steelblue;
}
.MyText {
fill: white;
text-anchor: middle;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var fso = new ActiveXObject("Scripting.FileSystemObject");
var f = fso.OpenTextFile("D:\duqu.txt",1);
var s = "";
while (!f.AtEndOfStream)
s = f.ReadLine();
f.Close();
var str1 = s.toString().split(",");
var array = [];
str1.forEach(function(data,index,arr){
array.push(+data);
});
//定义一个数组
var dataset= array;
//画布大小
var width = 400;
var height = 400;
//在 body 里添加一个 SVG 画布
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
//画布周边的空白
var padding = {left:30, right:30, top:20, bottom:20};
//x轴的比例尺
var xScale = d3.scale.ordinal()
.domain(d3.range(dataset.length))
.rangeRoundBands([0, width - padding.left - padding.right]);
//y轴的比例尺
var yScale = d3.scale.linear()
.domain([0,d3.max(dataset)])
.range([height - padding.top - padding.bottom, 0]);
//定义x轴
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom");
//定义y轴
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
//矩形之间的空白
var rectPadding = 4;
//添加矩形元素
var rects = svg.selectAll(".MyRect")
.data(dataset)
.enter()
.append("rect")
.attr("class","MyRect")
.attr("transform","translate(" + padding.left + "," + padding.top + ")")
.attr("x", function(d,i){
return xScale(i) + rectPadding/2;
} )
.attr("y",function(d){
return yScale(d);
})
.attr("width", xScale.rangeBand() - rectPadding )
.attr("height", function(d){
return height - padding.top - padding.bottom - yScale(d);
});
//添加文字元素
var texts = svg.selectAll(".MyText")
.data(dataset)
.enter()
.append("text")
.attr("class","MyText")
.attr("transform","translate(" + padding.left + "," + padding.top + ")")
.attr("x", function(d,i){
return xScale(i) + rectPadding/2;
} )
.attr("y",function(d){
return yScale(d);
})
.attr("dx",function(){
return (xScale.rangeBand() - rectPadding)/2;
})
.attr("dy",function(d){
return 20;
})
.text(function(d){
return d;
});
//添加x轴
svg.append("g")
.attr("class","axis")
.attr("transform","translate(" + padding.left + "," + (height - padding.bottom) + ")")
.call(xAxis);
//添加y轴
svg.append("g")
.attr("class","axis")
.attr("transform","translate(" + padding.left + "," + padding.top + ")")
.call(yAxis);
</script>
</body>
</html>
...全文
请发表友善的回复…
发表回复
baidu_38476111 2018-07-12
- 打赏
- 举报
上面写的那个代码中，文件名是哪一个啊？
天际的海浪 2018-07-11
- 打赏
- 举报
如果这个txt文件和你的网页在同一个服务器上可以用ajax方式读取
天际的海浪 2018-07-11
- 打赏
- 举报
new ActiveXObject("Scripting.FileSystemObject");这个对象只能在安全级别设置为极低的情况下才允许使用，并且只有ie浏览器支持
你可以用这个读取用户选择的文本文件（必须用户选择了文件才能读取，不能由网页中设置）
你可以用这个读取用户选择的文本文件（必须用户选择了文件才能读取，不能由网页中设置）
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title> 页面名称 </title>
</head>
<body>
如果是客户端用户的文件，就需要用户选择文件得以受权后才能读取。
<input type="file" id='file' onchange="opentext()"><br />
<textarea id="test" rows="20" cols="50">
</textarea>
<script type="text/javascript">
function opentext() {
var f=document.getElementById('file').files[0];
var r= new FileReader();
r.onload=function() {
document.getElementById('test').value=this.result;
};
r.readAsText(f,"UTF-8");//"UTF-8"是读取文件的文件编码，也可以是"GB2312"。
}
</script>
</body>
</html>
