asp.net中一款极为简单实用的图表插件(jquery)

介绍一款简单实用的图表插件，它基于jquery和jquery的插件gchart，轻松实现各种图表展示。这款gchart插件封装了google的图表api，功能强大且易于操作。

一、柱状图

1. 竖状单行条形直方图演示

从某网站获取了六个月份的用户注册量数据。从数据中可以看出，一二月份注册用户数为0。图表清晰对比了每个月份用户注册量的变化。以下是实现该图表的代码示例：

月度报表功能展示：

```javascript

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: "x200"

};

var api = new jGCharts.Api();

jQuery('').attr('src', api.make(opt)).appendTo("myDIV");

}

});

}

```

2. 竖状多行条形直方图演示

数据与第一种情况相似，展示季度统计数据，包括第一季度的相关数据统计。显示结果如图。代码如下：

季度报表功能展示：

```javascript

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: "x200"

};

var api = new jGCharts.Api();

jQuery('').attr('src', api.make(opt)).appendTo("myQuarter");

}

});

}

```

3. 横条多行条形直方图演示

这是第二种情况的变种，只是坐标轴方向有所不同。代码如下：

季度报表（横条）功能展示：

```javascript

function QuarterReportBhg() {

$.ajax({

url: "/Home/GetTotalCount",

success: function (data) {

var json = eval(data);

var opt = {

data: json,

axis_labels: ["一季度", "二季度"],

legend: ["serie1", "serie2", "serie3"],

title: "情缘图表",

size: "x200",

type: "bhg"

};

var api = new jGCharts.Api();

jQuery('').attr('src', api.make(opt)).appendTo("myQuarterbhg");

}

});

一、分数统计图表展示

在数字的世界里，分数是评价学生学习成果的重要指标。让我们通过一段简单的代码，展示如何轻松生成分数统计图表。我们使用的是jQuery和jGCharts插件来实现这一功能。

通过Ajax调用服务器上的数据接口`/Home/GetScore`，获取学生的分数数据。这些数据可能包括语文、数学、英语和综合等科目的分数。一旦数据获取成功，我们使用jGCharts插件将数据渲染成图表。图表类型为“bhs”，显示“情缘图表”，并设定图表尺寸为x200像素。将生成的图表嵌入到页面上的指定位置`myScoreReport`。

二、折线图展示

折线图是一种直观的图表类型，适用于展示一段时间内的数据变化趋势，比如温度走势。以下是使用jGCharts插件创建折线图的代码示例。

代码通过Ajax请求从`/Home/GetTemperature`获取温度数据，这些数据按月份进行排列。然后，使用jGCharts插件将数据渲染成折线图，图表类型为“lc”，并设定其他相关参数如条形的宽度和间距、填充区域等。将生成的折线图嵌入到页面上的`myTemperature`位置。

三、饼图展示

饼图是一种常用的统计数据展示方式，可以清晰地展示各类别的占比情况。以下是创建普通饼图和3D饼图的示例代码。

两段代码都是通过Ajax请求从`/Home/GetQuarterPie`获取数据，这些数据可能代表某季度的各月份占比情况。然后，使用jGCharts插件将数据渲染成饼图或3D饼图，并嵌入到页面上的指定位置。

四、代码分析

从上述代码中可以看出，使用jGCharts插件制作图表的过程相当直观和简单。只需根据图表类型选择相应的插件方法，通过Ajax获取数据，然后设定相关参数，即可轻松生成各种类型的图表。无论是折线图、饼图还是其他类型的图表，都可以通过调整参数和调用不同的方法来实现。这种灵活性和便捷性使得jGCharts成为一个非常实用的工具，用于在网页上展示数据。重塑图表类型与参数指南

欢迎我们的图表类型与参数指南。这里将详细介绍不同的图表类型及其相关参数，以帮助您轻松定制并创建独特的图表。

一、折线图（lc）与点线图（lxy）：

折线图适用于展示数据随时间或其他连续变量的变化趋势。点线图则结合了折线图和散点图的特性，既展示数据走势，又突出每个数据点的位置。

二、Sparkline图（Sparkline）：

这是一种紧凑的图表类型，用于在有限的空间内展示关键数据的变化趋势。特别适合在仪表盘或详情页面中使用。

三、条形图系列：

我们提供多种条形图类型，包括水平条形图（bhg）和垂直条形图（bvg）。叠加型水平条形图（bhs）和叠加型垂直条形图（bvs）则允许您在同一个图表中展示多组数据，便于对比分析。

四、饼图与三维饼图（p、p3）：

饼图用于展示数据的比例分布。三维饼图则通过立体效果，更直观地呈现各部分的占比。

五、维恩图（Venn Diagram）（v）：

维恩图用于展示不同数据集合之间的逻辑关系，帮助您快速了解各集合间的交集和并集。

六、散点图（s）、雷达图（r）、地图（t）与仪表（gom）：

散点图用于展示两个变量之间的关系；雷达图则用于展示多变量数据的综合表现；地图类型图表则可以展示地理数据分布；仪表图则用于展示关键指标的进度或水平。

接下来，让我们深入了解这些图表的参数设置：

1. data：一个包含数据的二维数组，如[[153, 60, 52], [113, 70, 60], [120, 80, 40]]。

2. size：图表的大小，如300x200（宽度x高度）。

3. xis_labels：横轴的文字标签。

4. legend：图表图例。

5. bar_width与bar_spacing：条形图的宽度和间距。

6. colors：图例的颜色，如['4b9b41','81419b','41599b']。

7. bg系列参数：背景颜色、透明度、渐变等。

8. title：图表标题及其颜色和大小。

9. grid：是否显示网格，以及网格的线条、颜色和宽度等。

10. lines参数：点线图的线宽、点宽和空白宽度。

我们还提供了一个代码示例供您参考。请注意，该示例代码可能需要您根据实际情况进行修改，因为部分数据可能来自数据库，运行时可能会遇到问题。我们鼓励您尝试修改参数，不同的图表效果。

通过本指南，您应该已经对各类图表及其参数有了基本的了解。如果您有兴趣，可以尝试修改示例代码，体验不同的图表效果。如有任何疑问，欢迎随时联系我们。