1、js调用
稍后加上
2、封装的js
function DrawChart(option) {
//如果没有参数，则返回
if (!option) {
return;
}
if (!option.data || !option.containerId || !option.chartSize || !option.serials || !option.xAxis) {
return;
}
var dataset = option.data;
//if (dataset.length < 2) {
// return;
//}
var serials = option.serials;
if (serials.length == 0) {
return;
}
//设置图表的区域大小
var margin = { top: 30, right: 40, bottom: 80, left: 50 };
if (option.margin) {
margin = option.margin;
}
var chartSize = option.chartSize;
var w = chartSize.x - margin.left - margin.right;
var h = chartSize.y - margin.top - margin.bottom;
var legendSize = 20;
var legendDistance = 40 + margin.top;
//X轴处理
//----------x轴数据范围
var xFactor = option.xAxis.xFactor;
var i;
var xRange = [];
for (i = 0; i < dataset.length; i++) {
xRange.push(xFactor(dataset[i]));
}
//----------x轴处理
var tickCount = option.xAxis.tickCount ? option.xAxis.tickCount : 5;
var xScale; //x轴尺度变换
var xAxis; //X轴刻度
var tickInterval = option.xAxis.allTick ? 1 : Math.round(xRange.length / tickCount); //刻度间距(时间刻度用)
var rangeBand = w * 0.8 / dataset.length;
switch (option.xAxis.type) {
case "ordinal":
//x轴的序数尺度变换
switch (option.chartType) {
case "bar":
xScale = d3.scale.ordinal()
.domain(xRange)
.rangeRoundBands([0, w], 0.1); //设置值域
break;
case "line":
xScale = d3.scale.ordinal()
.domain(xRange)
.rangePoints([0, w], 1);
break;
default:
break;
}
xAxis = d3.svg.axis()
.scale(xScale) //设置x轴的尺度变换
.orient("bottom").ticks(tickCount); //设置坐标轴刻度方向
break;
case "number":
break;
case "date":
xScale = d3.time.scale()
.domain(d3.extent(xRange, function (d) { return d; }))
.rangeRound([0, w]);
//定义x轴
xAxis = d3.svg.axis()
.scale(xScale) //设置x轴的尺度变换
.orient("bottom") //设置坐标轴刻度方向
.ticks(d3.time.day, tickInterval)
.tickFormat(d3.time.format(option.xAxis.format));
break;
}
//Y轴处理
//---------y轴最小值
var yMin = d3.min(dataset, function (d) {
if (serials.length == 1) {
return serials[0].yFactor(d);
} else {
var minValue = serials[0].yFactor(d);
for (var j = 0; j < serials.length; j++) {
var value = serials[j].yFactor(d);
minValue = (minValue < value ? minValue : value);
}
return minValue;
}
});
//---------y轴最大值
var yMax = d3.max(dataset, function (d) {
if (serials.length == 1) {
return serials[0].yFactor(d);
} else {
var maxValue = serials[0].yFactor(d);
for (var j = 0; j < serials.length; j++) {
var value = serials[j].yFactor(d);
maxValue = (maxValue > value ? maxValue : value);
}
return maxValue;
}
});
var hasZeroY = false;
switch(option.chartType) {
case "bar":
if (yMax >= 0 && yMin <= 0) {
hasZeroY = true;
} else if (yMax < 0) {
yMax = 0;
hasZeroY = false;
} else if (yMin > 0) {
yMin = 0;
hasZeroY = false;
}
break;
default:
break;
}
//-----------上下增加5%，
var rangeExtent = (yMax - yMin) * 0.05;
if (yMin >= 0) {
yMax = yMax + rangeExtent;
yMin = yMin <= rangeExtent ? 0 : yMin - rangeExtent;
} else if (yMax <= 0) {
yMax = Math.abs(yMax) <= rangeExtent ? 0 : yMax + rangeExtent;
yMin = yMin - rangeExtent;
} else {
yMax = yMax + rangeExtent;
yMin = yMin - rangeExtent;
}
//-----------y轴尺度变换
var yScale = d3.scale.linear()
.domain([yMin, yMax]) //设置定义域为【0，最大值】
.range([h, 0]); //设置值域
//-----------定义y轴
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(5); //设置最多有5个刻度
//画图形
var container = d3.select("#" + option.containerId);
container.select("svg").remove();
//Create SVG element
var chart = container//选中DOM中的目标元素
.append("svg")//为目标元素附加上一个svg子元素
.attr("width", w + margin.left + margin.right)//设置这个svg的宽
.attr("height", h + margin.top + margin.bottom)//设置这个svg的高
// .append("g")
// .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.attr("style", "padding:20px;");
var svg = chart.append("g")
// .attr("width", w)
// .attr("height", h)
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
//-----------画标题
//给图表添加一个标题
chart.append("text")
.attr("x", (w / 2))
.attr("y", 0)
.attr("text-anchor", "middle")
.attr("class", option.title.cls)
.text(option.title.text);
//-----------画X轴
//Create X axis
svg.append("g")
.attr("class", "xAxis")
.attr("transform", "translate(0," + h + ")")//设置距下边界的距离
.call(xAxis)
.selectAll("text").style("text-anchor", "end").attr("dx", "-.8em").attr("dy", ".15em").attr("transform", "rotate(-45)");
//-----------画Y轴
//Create Y axis
svg.append("g")
.attr("class", "yAxis")
.attr("transform", "translate(0,0)")//设置轴距左边界的距离
.call(yAxis);
switch(option.chartType) {
case "bar":
if (hasZeroY) {
svg.append("g")
.attr("class", "xAxis")
.append("line")
.attr("y1", yScale(0))
.attr("y2", yScale(0))
.attr("x1", 0)
.attr("x2", w);
}
break;
default:
break;
}
//-----------画序列
var k, serial;
for (k = 0; k < serials.length; k++) {
serial = serials[k];
var yFactor = serial.yFactor;
var dataFormat = ",n";
if (serial.dataFormat) {
dataFormat = serial.dataFormat;
}
var d3Format = d3.format(dataFormat);
switch (option.chartType) {
case "line":
//为SVG添加折线
var line = d3.svg.line()
// .interpolate("linear")
.x(function (d) {
return xScale(xFactor(d));
})
.y(function (d) {
return yScale(yFactor(d));
});
svg.append("path")
.datum(dataset)
.attr("class", serial.g.pathCls)
.attr("d", line);
//折线添加 图标
svg.selectAll(".circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", function (d) {
return xScale(xFactor(d));
})
.attr("cy", function (d) {
return yScale(yFactor(d));
})
.attr("r", 3)
.append("title")
.text(function (d) {
return serial.tip.replace("{0}", d3Format(yFactor(d)));//d3Format(yFactor(d))
});
break;
case "bar":
//为SVG添加条形
svg.selectAll(".bar")
.data(dataset)
.enter().append("rect")
.attr("class", function (d) { return yFactor(d) < 0 ? "bar negative" : "bar positive"; })
.attr("x", function (d) { return xScale(xFactor(d)); })
.attr("width", rangeBand)
.attr("y", function (d) { return yScale(Math.max(yFactor(d), 0)); })
.attr("height", function (d) { return Math.abs(yScale(yFactor(d)) - yScale(0)); })
.append("title")
.text(function (d) {
return serial.tip.replace("{0}", d3Format(yFactor(d)));
});
break;
}
}
//-----------画图例
var legendCount = serials.length;
for (k = 0; k < serials.length; k++) {
serial = serials[k];
var legend = serial.legend;
if (legend) {
chart.append("rect")
.attr("x", w * (k + 1) / (legendCount + 1))
.attr("y", h + legendDistance)
.attr("width", legendSize)
.attr("height", legendSize)
.attr("class", legend.cls);
chart.append("text")
.attr("x", w * (k + 1) / (legendCount + 1) + legendSize)
.attr("y", h + legendDistance + 15)
.style("font-size", "14px")
.text(legend.text);
}
}
}
540
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
