TXT文件中的数据格式为
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>
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>
解决方案 »
- 【关于JQuery设计思想之 方法函数化是什么意思啊?在线等···】
- 如何在jsp中传递一个数组给javascript,然后在javascript中通过循环的方式将数组里面的值显示出来....
- 小弟要学JS,求一两本好的书籍!
- 使用jquery的validate插件时,equalTo判断两个表单值是否相等,造成浏览器假死的情况
- 请教name在javascript里到底是做什么的
- js作用域链和函数表达式的深入讨论
- 如何获取iframe网页的源代码。
- 义务提供JavaScript的函数集!!!
- 谁能帮我做到这样的效果?
- 如何判断一个数值是否为整型?
- 前端js怎样设置不会让用户每次访问的时候都重定向url
- 调用API时出现跨域问题
你可以用这个读取用户选择的文本文件(必须用户选择了文件才能读取,不能由网页中设置)<!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>