mysql实现柱形图功能_简单的柱形图的实现

首先在d3.js 中 我们要知道几个概念

一个是比例尺

比例尺在d3.js中使用的函数是 d3.scale

在d3.js中又分为两种比例尺

1.线性比例尺

线性比例尺就是连续的数据

var yScale = d3.scale.linear() //定义一个线性比例尺

.domain([0, 10)]) //设置它的定义域

.range([0,10]); //设置它的长度

2.序数比例尺

序数比例尺是不连续的数据

var xScale = d3.scale.ordinal() //定义一个序数比例尺

.domain(d3.range(dataset.length)) //设置它的定义域

.rangeRoundBands([0, 10]); //设置它的值域

而另一个就是数轴的概念

var xAxis = d3.svg.axis() //定义数轴

.scale(xScale) //指定比例尺

.orient("bottom"); //确定数轴的方向

知道这个概念之后我们就可以在页面进行柱状图的构建了

首先我们要在页面上顶一个画布

var height = 400; //设置高度

var width = 400; //设置宽度

var svg = d3.select("body") //添加一个画布

.append("svg")

.attr("height", height)

.attr("width", width);

然后定义两个比例尺一个x的一个y的

var padding = {lef