原创|其它|编辑:郝浩|2012-11-20 11:58:59.000|阅读 937 次
概述:如何在ChartDirector中利用一个数据库查询创建多个图表,附加图例和源码。
# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>
在这个示例中,将会介绍如何在同样的页面中创建多个图表,而图表里面的数据将会来自同一个数据查询。值得注意的是,尽管数据库的示例代码是网页的ASP.NET语言,但是这个技术依然适用于Windows Forms应用程序。
具体的代码如下:
VB
<%@ Page Language="VB" Debug="true" %> <%@ Import Namespace="ChartDirector" %> <%@ Register TagPrefix="chart" Namespace="ChartDirector" Assembly="netchartdir" %> <script runat="server"> ' ' Create the first chart based on the given data ' Private Sub createChart1(viewer As WebChartViewer, selectedYear As String, _ software As Double(), hardware As Double(), services As Double()) ' Create a XYChart object of size 600 x 300 pixels, with a light grey (eeeeee) ' background, black border, 1 pixel 3D border effect and rounded corners. Dim c As XYChart = New XYChart(600, 300, &Heeeeee, &H000000, 1) c.setRoundedFrame() ' Set the plotarea at (60, 60) and of size 520 x 200 pixels. Set background color ' to white (ffffff) and border and grid colors to grey (cccccc) c.setPlotArea(60, 60, 520, 200, &Hffffff, -1, &Hcccccc, &Hccccccc) ' Add a title to the chart using 15pts Times Bold Italic font, with a light blue ' (ccccff) background and with glass lighting effects. c.addTitle("Global Revenue for Year " & selectedYear, _ "Times New Roman Bold Italic", 15).setBackground(&Hccccff, &H000000, _ Chart.glassEffect()) ' Add a legend box at (70, 32) (top of the plotarea) with 9pts Arial Bold font c.addLegend(70, 32, False, "Arial Bold", 9).setBackground(Chart.Transparent) ' Add a line chart layer using the supplied data Dim layer As LineLayer = c.addLineLayer2() layer.addDataSet(software, &Hff0000, "Software").setDataSymbol( _ Chart.CircleShape, 9) layer.addDataSet(hardware, &H00ff00, "Hardware").setDataSymbol( _ Chart.DiamondShape, 11) layer.addDataSet(services, &Hffaa00, "Services").setDataSymbol( _ Chart.Cross2Shape(), 11) ' Set the line width to 3 pixels layer.setLineWidth(3) ' Set the x axis labels. In this example, the labels must be Jan - Dec. Dim labels() As String = {"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", _ "Aug", "Sept", "Oct", "Nov", "Dec"} c.xAxis().setLabels(labels) ' Set the y axis title c.yAxis().setTitle("USD (Millions)") ' Set axes width to 2 pixels c.xAxis().setWidth(2) c.yAxis().setWidth(2) ' Output the chart viewer.Image = c.makeWebImage(Chart.PNG) ' Include tool tip for the chart viewer.ImageMap = c.getHTMLImageMap("", "", _ "title='{dataSetName} Revenue for {xLabel} = USD {value}M'") End Sub ' ' Create the second chart based on the given data ' Private Sub createChart2(viewer As WebChartViewer, selectedYear As String, _ software As Double(), hardware As Double(), services As Double()) ' Create a XYChart object of size 600 x 300 pixels, with a light grey (eeeeee) ' background, black border, 1 pixel 3D border effect and rounded corners. Dim c As XYChart = New XYChart(600, 300, &Heeeeee, &H000000, 1) c.setRoundedFrame() ' Set the plotarea at (60, 60) and of size 520 x 200 pixels. Set background color ' to white (ffffff) and border and grid colors to grey (cccccc) c.setPlotArea(60, 60, 520, 200, &Hffffff, -1, &Hcccccc, &Hccccccc) ' Add a title to the chart using 15pts Times Bold Italic font, with a dark green ' (006600) background and with glass lighting effects. c.addTitle("Global Revenue for Year " & selectedYear, _ "Times New Roman Bold Italic", 15, &Hffffff).setBackground(&H006600, _ &H000000, Chart.glassEffect(Chart.ReducedGlare)) ' Add a legend box at (70, 32) (top of the plotarea) with 9pts Arial Bold font c.addLegend(70, 32, False, "Arial Bold", 9).setBackground(Chart.Transparent) ' Add a stacked area chart layer using the supplied data Dim layer As AreaLayer = c.addAreaLayer2(Chart.Stack) layer.addDataSet(software, &H40ff0000, "Software") layer.addDataSet(hardware, &H4000ff00, "Hardware") layer.addDataSet(services, &H40ffaa00, "Services") ' Set the area border color to the same as the fill color layer.setBorderColor(Chart.SameAsMainColor) ' Set the x axis labels. In this example, the labels must be Jan - Dec. Dim labels() As String = {"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", _ "Aug", "Sept", "Oct", "Nov", "Dec"} c.xAxis().setLabels(labels) ' Set the y axis title c.yAxis().setTitle("USD (Millions)") ' Set axes width to 2 pixels c.xAxis().setWidth(2) c.yAxis().setWidth(2) ' Output the chart viewer.Image = c.makeWebImage(Chart.PNG) ' Include tool tip for the chart viewer.ImageMap = c.getHTMLImageMap("", "", _ "title='{dataSetName} Revenue for {xLabel} = USD {value}M'") End Sub ' ' Page Load event handler ' Private Sub Page_Load(sender As System.Object, e As System.EventArgs) ' The currently selected year Dim selectedYear As String = yearSelect.SelectedItem.Value ' SQL statement to get the monthly revenues for the selected year. Dim SQL As String = _ "Select Software, Hardware, Services From revenue Where Year(TimeStamp) = " _ & selectedYear & " Order By TimeStamp" ' ' Connect to database and read the query result into arrays ' ' In this example, we use OleDbConnection to connect to MS Access (Jet Engine). ' If you are using MS SQL, you can use SqlConnection instead of OleConnection. Dim dbconn As System.Data.IDbConnection = _ New System.Data.OleDb.OleDbConnection( _ "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + Server.MapPath( _ "sample.mdb;")) dbconn.Open() ' Set up the SQL statement Dim sqlCmd As System.Data.IDbCommand = dbconn.CreateCommand() sqlCmd.CommandText = SQL ' Read the data into the DBTable object Dim table As DBTable = New DBTable(sqlCmd.ExecuteReader()) dbconn.Close() ' Get the data as arrays Dim software() As Double = table.getCol(0) Dim hardware() As Double = table.getCol(1) Dim services() As Double = table.getCol(2) ' ' Now we obtained the data into arrays, we can draw the chart using ChartDirector ' createChart1(WebChartViewer1, yearSelect.SelectedItem.Value, software, _ hardware, services) createChart2(WebChartViewer2, yearSelect.SelectedItem.Value, software, _ hardware, services) End Sub </script> <html xmlns="//www.w3.org/1999/xhtml"> <head> <title>Database Integration Demo (2)</title> </head> <body style="margin:5px 0px 0px 5px"> <div style="font-size:18pt; font-family:verdana; font-weight:bold"> Database Integration Demo (2) </div> <hr style="border:solid 1px #000080" /> <div style="font-size:10pt; font-family:verdana; width:600px"> <a href='viewsource.aspx?file=<%=Request("SCRIPT_NAME")%>'> View Source Code </a> <br /> <br /> The example demonstrates creating two charts in the same page using data from a database. <br /> <br /> <form id="Form1" method="post" runat="server"> <div> I want to obtain the revenue data for the year <asp:DropDownList id="yearSelect" runat="server"> <asp:ListItem>1990</asp:ListItem> <asp:ListItem>1991</asp:ListItem> <asp:ListItem>1992</asp:ListItem> <asp:ListItem>1993</asp:ListItem> <asp:ListItem>1994</asp:ListItem> <asp:ListItem>1995</asp:ListItem> <asp:ListItem>1996</asp:ListItem> <asp:ListItem>1997</asp:ListItem> <asp:ListItem>1998</asp:ListItem> <asp:ListItem>1999</asp:ListItem> <asp:ListItem>2000</asp:ListItem> <asp:ListItem Selected="True">2001</asp:ListItem> </asp:DropDownList> <asp:Button id="OKPB" runat="server" Text="OK"></asp:Button> <br /><br /> <chart:WebChartViewer id="WebChartViewer1" runat="server" /> <br /> <chart:WebChartViewer id="WebChartViewer2" runat="server" /> </div> </form> </div> </body> </html>
C#
<%@ Page Language="C#" Debug="true" %> <%@ Import Namespace="ChartDirector" %> <%@ Register TagPrefix="chart" Namespace="ChartDirector" Assembly="netchartdir" %> <script runat="server"> // // Create the first chart based on the given data // private void createChart1(WebChartViewer viewer, string selectedYear, double[] software, double[] hardware, double[] services) { // Create a XYChart object of size 600 x 300 pixels, with a light grey (eeeeee) // background, black border, 1 pixel 3D border effect and rounded corners. XYChart c = new XYChart(600, 300, 0xeeeeee, 0x000000, 1); c.setRoundedFrame(); // Set the plotarea at (60, 60) and of size 520 x 200 pixels. Set background // color to white (ffffff) and border and grid colors to grey (cccccc) c.setPlotArea(60, 60, 520, 200, 0xffffff, -1, 0xcccccc, 0xccccccc); // Add a title to the chart using 15pts Times Bold Italic font, with a light blue // (ccccff) background and with glass lighting effects. c.addTitle("Global Revenue for Year " + selectedYear, "Times New Roman Bold Italic", 15).setBackground(0xccccff, 0x000000, Chart.glassEffect()); // Add a legend box at (70, 32) (top of the plotarea) with 9pts Arial Bold font c.addLegend(70, 32, false, "Arial Bold", 9).setBackground(Chart.Transparent); // Add a line chart layer using the supplied data LineLayer layer = c.addLineLayer2(); layer.addDataSet(software, 0xff0000, "Software").setDataSymbol(Chart.CircleShape, 9); layer.addDataSet(hardware, 0x00ff00, "Hardware").setDataSymbol( Chart.DiamondShape, 11); layer.addDataSet(services, 0xffaa00, "Services").setDataSymbol(Chart.Cross2Shape( ), 11); // Set the line width to 3 pixels layer.setLineWidth(3); // Set the x axis labels. In this example, the labels must be Jan - Dec. string[] labels = {"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"}; c.xAxis().setLabels(labels); // Set the y axis title c.yAxis().setTitle("USD (Millions)"); // Set axes width to 2 pixels c.xAxis().setWidth(2); c.yAxis().setWidth(2); // Output the chart viewer.Image = c.makeWebImage(Chart.PNG); // Include tool tip for the chart viewer.ImageMap = c.getHTMLImageMap("", "", "title='{dataSetName} Revenue for {xLabel} = USD {value}M'"); } // // Create the second chart based on the given data // private void createChart2(WebChartViewer viewer, string selectedYear, double[] software, double[] hardware, double[] services) { // Create a XYChart object of size 600 x 300 pixels, with a light grey (eeeeee) // background, black border, 1 pixel 3D border effect and rounded corners. XYChart c = new XYChart(600, 300, 0xeeeeee, 0x000000, 1); c.setRoundedFrame(); // Set the plotarea at (60, 60) and of size 520 x 200 pixels. Set background // color to white (ffffff) and border and grid colors to grey (cccccc) c.setPlotArea(60, 60, 520, 200, 0xffffff, -1, 0xcccccc, 0xccccccc); // Add a title to the chart using 15pts Times Bold Italic font, with a dark green // (006600) background and with glass lighting effects. c.addTitle("Global Revenue for Year " + selectedYear, "Times New Roman Bold Italic", 15, 0xffffff).setBackground(0x006600, 0x000000, Chart.glassEffect(Chart.ReducedGlare)); // Add a legend box at (70, 32) (top of the plotarea) with 9pts Arial Bold font c.addLegend(70, 32, false, "Arial Bold", 9).setBackground(Chart.Transparent); // Add a stacked area chart layer using the supplied data AreaLayer layer = c.addAreaLayer2(Chart.Stack); layer.addDataSet(software, 0x40ff0000, "Software"); layer.addDataSet(hardware, 0x4000ff00, "Hardware"); layer.addDataSet(services, 0x40ffaa00, "Services"); // Set the area border color to the same as the fill color layer.setBorderColor(Chart.SameAsMainColor); // Set the x axis labels. In this example, the labels must be Jan - Dec. string[] labels = {"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"}; c.xAxis().setLabels(labels); // Set the y axis title c.yAxis().setTitle("USD (Millions)"); // Set axes width to 2 pixels c.xAxis().setWidth(2); c.yAxis().setWidth(2); // Output the chart viewer.Image = c.makeWebImage(Chart.PNG); // Include tool tip for the chart viewer.ImageMap = c.getHTMLImageMap("", "", "title='{dataSetName} Revenue for {xLabel} = USD {value}M'"); } // // Page Load event handler // protected void Page_Load(object sender, EventArgs e) { // The currently selected year string selectedYear = yearSelect.SelectedItem.Value; // SQL statement to get the monthly revenues for the selected year. string SQL = "Select Software, Hardware, Services From revenue Where Year(TimeStamp) = " + selectedYear + " Order By TimeStamp"; // // Connect to database and read the query result into arrays // // In this example, we use OleDbConnection to connect to MS Access (Jet Engine). // If you are using MS SQL, you can use SqlConnection instead of OleConnection. System.Data.IDbConnection dbconn = new System.Data.OleDb.OleDbConnection( "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + Server.MapPath( "sample.mdb;")); dbconn.Open(); // Set up the SQL statement System.Data.IDbCommand sqlCmd = dbconn.CreateCommand(); sqlCmd.CommandText = SQL; // Read the data into the DBTable object DBTable table = new DBTable(sqlCmd.ExecuteReader()); dbconn.Close(); // Get the data as arrays double[] software = table.getCol(0); double[] hardware = table.getCol(1); double[] services = table.getCol(2); // // Now we obtained the data into arrays, we can draw the chart using // ChartDirector // createChart1(WebChartViewer1, yearSelect.SelectedItem.Value, software, hardware, services); createChart2(WebChartViewer2, yearSelect.SelectedItem.Value, software, hardware, services); } </script> <html xmlns="//www.w3.org/1999/xhtml"> <head> <title>Database Integration Demo (2)</title> </head> <body style="margin:5px 0px 0px 5px"> <div style="font-size:18pt; font-family:verdana; font-weight:bold"> Database Integration Demo (2) </div> <hr style="border:solid 1px #000080" /> <div style="font-size:10pt; font-family:verdana; width:600px"> <a href='viewsource.aspx?file=<%=Request["SCRIPT_NAME"]%>'> View Source Code </a> <br /> <br /> The example demonstrates creating two charts in the same page using data from a database. <br /> <br /> <form id="Form1" method="post" runat="server"> <div> I want to obtain the revenue data for the year <asp:DropDownList id="yearSelect" runat="server"> <asp:ListItem>1990</asp:ListItem> <asp:ListItem>1991</asp:ListItem> <asp:ListItem>1992</asp:ListItem> <asp:ListItem>1993</asp:ListItem> <asp:ListItem>1994</asp:ListItem> <asp:ListItem>1995</asp:ListItem> <asp:ListItem>1996</asp:ListItem> <asp:ListItem>1997</asp:ListItem> <asp:ListItem>1998</asp:ListItem> <asp:ListItem>1999</asp:ListItem> <asp:ListItem>2000</asp:ListItem> <asp:ListItem Selected="True">2001</asp:ListItem> </asp:DropDownList> <asp:Button id="OKPB" runat="server" Text="OK"></asp:Button> <br /><br /> <chart:WebChartViewer id="WebChartViewer1" runat="server" /> <br /> <chart:WebChartViewer id="WebChartViewer2" runat="server" /> </div> </form> </div> </body>
上面的代码包含了两种方法用于生成图表,并将图表放入 WebChartViewer 对象,图表的数据作为参数传递。
VB
Private Sub createChart1(viewer As WebChartViewer, selectedYear As String, _ software As Double(), hardware As Double(), services As Double()) Private Sub createChart2(viewer As WebChartViewer, selectedYear As String, _ software As Double(), hardware As Double(), services As Double()) C#
private void createChart1(WebChartViewer viewer, string selectedYear, double[] software, double[] hardware, double[] services) private void createChart2(WebChartViewer viewer, string selectedYear, double[] software, double[] hardware, double[] services)
在 Page_Load 方法内的代码,创建了一个到数据库的连接,然后将查询发送到数据库,查询的结果将会读入到DBTable对象。
在此示例中,数据被传递给这两个图表生成方法来创建两个图表。
VB
Dim table As DBTable = new DBTable(sqlCmd.ExecuteReader()) dbconn.Close() Dim software As Double() = table.getCol(0) Dim hardware As Double() = table.getCol(1) Dim services As Double() = table.getCol(2) createChart1(WebChartViewer1, yearSelect.SelectedItem.Value, software, _ hardware, services) createChart2(WebChartViewer2, yearSelect.SelectedItem.Value, software, _ hardware, services)
C#
DBTable table = new DBTable(sqlCmd.ExecuteReader()); dbconn.Close(); double[] software = table.getCol(0); double[] hardware = table.getCol(1); double[] services = table.getCol(2); createChart1(WebChartViewer1, yearSelect.SelectedItem.Value, software, hardware, services); createChart2(WebChartViewer2, yearSelect.SelectedItem.Value, software, hardware, services);
本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn
文章转载自:慧都控件