asp.net中一款极为简单实用的图表插件中一款极为简单实用的图表插件(jquery)
一一 柱状图柱状图
(1) 竖状单行条形直方图效果图:
以上数据取自某个网站六个月份的用户注册量 。从以上数据可以看出,一二月份注册用户数为0,图表能够清晰对比每个月份
用户注册量的变化。
代码如下:
//月度报表
function MonthReport() {
$.ajax({
url: “/Home/About”,
success: function (data) {
var json = eval(data);
var opt = {
data: json,
axis_labels: [“一月”, “二月”, “三月”, “四月”, “五月”, “六月”],
legend: [“serie1”, “serie2”, “serie3”, “serie4”, “serie5”, “serie6”],
title: “情缘图表”,
size: “400×200”
};
var api = new jGCharts.Api();
jQuery(‘<img>’).attr(‘src’, api.make(opt)).appendTo(“#myDIV”);
}
});
}
(2) 竖状多行条形直方图效果图:
以上数据和第一种情况差不多,这是这里是做的季度统计,这里做了第一季度和第二季度的相关数据统计。显示结果如图
代码如下:
//季度报表
function QuarterReport() {
$.ajax({
url: “/Home/GetTotalCount”,
success: function (data) {
var json = eval(data);
var opt = {
data: json,
axis_labels: [“一季度”, “二季度”],
legend: [“serie1”, “serie2”, “serie3”],
title: “情缘图表”,
size: “400×200”
};
var api = new jGCharts.Api();
jQuery(‘<img>’).attr(‘src’, api.make(opt)).appendTo(“#myQuarter”);
}
});
}