使用FusionCharts ASP Class创建图表

FusionCharts可与ASP一同使用以绘制动态数据驱动图表。使用FusionCharts ASP Class来渲染图表变得更加容易。接下来,我们一起来看看如何使用FusionCharts ASP Class功能并创建图表。

注意:本文中所讨论的代码都包含在Download Package > Code > ASPClass > BasicExample文件夹中。

创建简单图表

接下来,我们创建第一个图表。在本示例中,我们将创建一个 "Monthly Unit Sales"图表。

运行代码,将会出现如图所示的图表效果:

创建一个带有外部XML文件的图表

现在,我们将以另外一种方式创建相同的图表。此时,我们将使用两个不同的程序。一个程序利用FusionCharts ASP Class创建图表XML,另外一个程序借助于Data URL方法利用该XML来渲染图表。 Data.asp 文件中的代码可创建XML,而 SimpleChart.asp文件利用XML渲染图表。

Data.asp文件中的代码类似于上例中的代码,唯一不同的是,它不渲染代码,而是将XML流向SimpleChart.asp文件。

<%@LANGUAGE="VBSCRIPT"%>
<% option explicit %>
<%
'We have included ../../Includes/FusionCharts_Gen.asp - FusionCharts ASP Class
'to help us easily embed the charts.
%>
<!--#include file="../../Includes/FusionCharts_Gen.asp"-->
<%
'This page demonstrates the ease of generating charts using FusionCharts ASPClass.
'We created a FusionCharts object instance
'Set chart values and configurations and returns the XML using getXML() function
'and write it to the response stream to build the XML
'Here, we have kept this example very simple.
dim FC
' Create FusionCharts ASP class object
set FC = new FusionCharts
' Set chart type to column 3d
call FC.setChartType("column3D")
dim strParam
' Define chart attributes
strParam="caption=Monthly Unit Sales;xAxisName=Month;yAxisName=Units;decimals=0; formatNumberScale=0;showLabels=1"
' Set chart attributes
call FC.setChartParams(strParam)
' Add chart data values and category names
call FC.addChartData("462","label=Jan","")
call FC.addChartData("857","label=Feb","")
call FC.addChartData("671","label=Mar","")
call FC.addChartData("494","label=Apr","")
call FC.addChartData("761","label=May","")
call FC.addChartData("960","label=Jun","")
call FC.addChartData("629","label=Jul","")
call FC.addChartData("622","label=Aug","")
call FC.addChartData("376","label=Sep","")
call FC.addChartData("494","label=Oct","")
call FC.addChartData("761","label=Nov","")
call FC.addChartData("960","label=Dec","")
'set content type as XML
Response.ContentType ="text/xml"
'Return the chart XML for Column 3D Chart
Response.Write(FC.getXML())
%>

接下来,我们一起来看看SimpleChart.asp功能:

输出结果和上例相同:

使用JavaScript渲染器创建简单图表:

FusionCharts允许你创建纯JavaScript图表,无需Flash。针对上述代码并做相应修改后,可实现上述相同的图表,代码片段如下:

' Create FusionCharts ASP class object
set FC = new FusionCharts
' Set chart type to column 3d
call FC.setChartType( "column3D" )
' Set JavaScript renderer
FC.setRenderer( "javascript" )

...


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using InfoSoftGlobal; using System.Text; using System.Data.SqlClient; using System.Data; namespace MYASP { /// <summary> /// Author:jilongliang /// </summary> public partial class index : System.Web.UI.Page { protected void Page_Load (object sender, EventArgs e) { } /// <summary> /// 直接在控件加载出来 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> protected void Literal1_Load (object sender, EventArgs e) { Literal1.Text = FusionCharts.RenderChart("swf/ScrollCombiDY2D.swf", "fusioncharts.xml", "", "fusioncharts1", "500", "500", false, true); } /// <summary> /// 用户输入显示的图形fusioncharts /// </summary> /// <param name="sender"></param> /// <param name="e"></param> protected void btnSubmit_Click (object sender, EventArgs e) { //Request.Form() //Label1.Text = Request["ponit1"]; StringBuilder xmlData = new StringBuilder(); xmlData.Append("<chart caption='报表' subCaption='报表' showPercentValues='1' pieSliceDepth='30' showBorder='1'>"); xmlData.AppendFormat("<set label='Java' value='{0}' />", txtPoint1.Text); //txtPoint1.Text xmlData.AppendFormat("<set label='asp.net' value='{0}' />", txtPoint2.Text); xmlData.AppendFormat("<set label='C++' value='{0}' />", txtPoint3.Text); xmlData.AppendFormat("<set label='Android' value='{0}' />", txtPoint4.Text); xmlData.Append("</chart>"); Literal1.Text = FusionCharts.RenderChart("swf/Pie3D.swf", "", xmlData.ToString(), "fusioncharts2", "800", "500", false, false); } /// <summary> /// 从数据库读数据 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> protected void Literal2_Load (object sender, EventArgs e) { string query = "select Team ,Points from tb_charts"; StringBuilder xmlData = new StringBuilder(); using(SqlDataReader dr = SQLDBHelper.ExecuteReader(CommandType.Text, query, null)) { //<chart caption='某公司部门报表数据显示' xAxisName='Teams' yAxisName='Points' showValues='0' formatNumberScale='0' showBorder='0'> xmlData.AppendFormat("<chart caption='某公司报表数据显示'>"); while(dr.Read()) { xmlData.AppendFormat("<set label='{0}' value='{1}'/>", dr ["Team"].ToString(), dr ["Points"].ToString()); } xmlData.AppendFormat("</chart>"); Literal2.Text = FusionCharts.RenderChart("swf/Column3D.swf", "", xmlData.ToString(), "testChart", "500", "500", false, true); } } /// <summary> /// /// </summary> /// <param name="sender"></param> /// <param name="e"></param> protected void test2_Click (object sender, EventArgs e) { string str1=Request ["ponit1"]; Label1.Text=str1; StringBuilder xmlData = new StringBuilder(); xmlData.Append("<chart caption='报表' subCaption='报表' showPercentValues='1' pieSliceDepth='30' showBorder='1'>"); xmlData.AppendFormat("<set label='Java' value='{0}' />", txtPoint1.Text); //txtPoint1.Text xmlData.AppendFormat("<set label='asp.net' value='{0}' />", txtPoint2.Text); xmlData.AppendFormat("<set label='C++' value='{0}' />", txtPoint3.Text); xmlData.AppendFormat("<set label='Android' value='{0}' />", txtPoint4.Text); xmlData.Append("</chart>"); Literal1.Text = FusionCharts.RenderChart("swf/Pie3D.swf", "", xmlData.ToString(), "fusioncharts2", "800", "500", false, false); } protected void test2_Click1 (object sender, EventArgs e) { } } }

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值