Create a chart in ASP.NETS (OWC)

xiaoxiao2021-03-06  37

Create a chart in ASP.NETS (OWC)

From: http://edu.cn700.com

Graphics and charts are a good form for data performance on Web, in ASP.NET, you can use Office Web Components (OWC) to create a chart. Office Web Component (OWC) is a set of components included in Microsoft Office 2000 that uses these components, which we can easily perform data analysis and reports in browser or traditional programming environments. For example: electronic reports, charts, data perspective, etc.

To display charts in your browser, you can do it below:

Read the data to generate the chart from the database; create an OWC chart; add the necessary data series; set data to a data; define the appearance; create a GIF graphic; use the IMG mark display graphic. To generate the data of the chart, the data source supported by the Chart Component component is: Implement any data source for the iDataSource interface; Ado RecordSet object; XML file; array or a text string of a certain format. In ASP, we can use ADO Recordset objects; in the .NET's ADO.NET, because ADO.NET does not implement iDataSource, .NET does not provide the ADO.NET DataSet object to the direct conversion of the ADO Recordset object, if you have one DataSet object, you either convert to an XML file, or generate a string of special formats to use. Below is the result of this example:

Below is an ASP.NET version of the VB.NET version of this feature and code:

Owc.aspx:

<% @ Page language = "vb" autoeventwireup = "false" codebehind = "@@@pxweb.owc"%> Webform1 </ title> <meta name =" generator "content =" Microsoft Visual Studio 7.0 "> <meta name =" code_language "content =" c # "> <meta name = "vs_defaultClientScript" content = "JavaScript"> <meta name = "vs_targetSchema" content = "http://schemas.microsoft.com/intellisense/ie5"> </ HEAD> <body MS_POSITIONING = "GridLayout"> <form id = "Form1" method = "post" runat = "server"> <ask: placeholder id = "charture" runat = "server"> </ asp: placeholder> </ form> </ body> </ html> Owc.aspx .vb:</p> <p>Imports System Imports OWC IMPORTS System.Web.ui</p> <p>Public class owc inherits system.web.ui.page protected withevents chartholder as system.Web.ui.WebControls.PlaceHolder</p> <p>#Region "The code" of the web form designer "</p> <p>'This call is required for the web form designer. <System.diagnostics.debuggerstepthrough ()> private subinitializecomponent ()</p> <p>End Sub</p> <p>Private Sub Page_init (Byval E AS System.EventArgs) Handles mybase.init 'Codegen: This method call is required by the Web Form Designer' Do not modify it using the code editor. InitializationComponent () End Sub</p> <p>#End region</p> <p>Private Sub Page_Load (ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load 'where user code page placement initialization' to place the object graph created ChartSpace Dim objCSpace As ChartSpace = New ChartSpaceClass () 'in Add a chart in the ChartSpace object, the add method returns the CHART object DIM ObjChart AS WCCHART = Objcspace.Charts.Add (0) 'Specifies the type of the chart. Type by Owc.ChartchartTypeenum enumeration value worth ObjChart.Type = chartcharttypeenum.chcharttypeColumnClustered 'Specify whether the chart needs the legend objChart.haslegegend = True</p> <p>'Given Title ObjChart.hastitle = true objChart.title.caption = "1-6 Say Data Distribution Map"</p> <p>'Given the X, Y axis ObjChart.axes (0) .hastitle = true objchart.axes (0) .title.caption = "Y axis: Quantity" ObjChart.axes (1) .haastitle = true objchart. Axes (1) .title.caption = "x axes: month"</p> <p>'Calculation Data' * Categories and VALUES You can use Tab to represent * DIM strsName as string = "Figure 1" DIM STRCATEGORY AS STRING = "1" ControlChars.tab "2" controlchars.tab _ " 3 " ControlChars.tab " 4 " ControlChars.tab " 5 " ControlChars.tab _ " 6 " ControlChars.tab Dim Strvalue as string =" 9 " ControlChars.tab " 8 " ControlChars. Tab _ "4" ControlChars.Tab "10" ControlChars.Tab "12" ControlChars.Tab _ "6" ControlChars.tab</p> <p>'Add a series objchart.seriescollection.add (0)</p> <p>'Given the name Objchart.seriesCollection (0) .SetData (ChartdimensionSenum.chdimseriesNames, _ ChartspecialDataSourcesenum.chDataLiteral, strsriesname)</p> <p>'Given classification objChart.SeriesCollection (0) .SetData (ChartDimensionsEnum.chDimCategories, _ ChartSpecialDataSourcesEnum.chDataLiteral, strCategory)' given value objChart.SeriesCollection (0) .SetData (ChartDimensionsEnum.chDimValues, _ ChartSpecialDataSourcesEnum.chDataLiteral, strValue) 'output GIF file. DIM StrabsolutePath As string = (Server.mAppath ("))) " /Images/test.gif "Objcspace.exportPicture (StrabsolutePath," GIF ", 600, 350)</p> <p>'Creating a relative path for GIF files. Dim strreLativePath As String = "images / test.gif"' Add image to PlaceHolder. DIM STRIMAGETAG AS STRING = "<img src = '" strreLativePath "' />"</p> <p>ChartHolder.controls.add (New LiteralControl (StrimageTag)) End Sub</p> <p>END CLASS</p> <p>Here is the C # version of OWC.ASP.CS</p> <p>Ublic Class OWC: System.Web.ui.page {protected system.Web.ui.webcontrols.PlaceHolder ChartHolder;</p> <p>Private Void Page_Load (Object Sender, System.EventArgs E) {// Place the user code here to initialize the page // to create a ChartSpace object to place the chart OWC.CHARTSPACECSPACE = New Owc.chartSpaceClass ();</p> <p>// Add a chart in a ChartSpace object, add method to Chart object owc.wcchart objChart = objcspace.charts.add (0);</p> <p>/ / Specify the type of the chart. Type by Owc.ChartchartTyPeenum enumeration value worth ObjChart.Type = Owc.Chartcharttypeenum.chcharttypeColumnClustered;</p> <p>/ / Specify whether the chart needs the legend objChart.haslegend = true;</p> <p>// Given the title objChart.hastitle = true; objChart.title.caption = "The first half of the year map";</p> <p>/ / A given X, Y axis illustration ObjChart.axes [0] .hastitle = true; objChart.axes [0] .title.caption = "Y: Number"; ObjChart.axes [1] .haastitle = True Objchart.axes [1] .title.caption = "x: Month";</p> <p>// Calculation Data / * Categories and VALUES can be represented by Tab to represent * / string strsName = "Figure 1"; String strcategory = "1" '/ t' "2" '/ t' " 3 " '/ t' " 4 " '/ t' " 5 " '/ t' " 6 " '/ t'; string strign =" 9 " '/ t' " 8 " '/ t' "4" '/ t' "10" '/ t' "12" '/ t' "6" '/ t'; // Add a Series ObjChart.seriesCollection .Add (0);</p> <p>// Given the name ObjChart.seriescollection [0] .SetData (Owc.ChartdimensionSenum.chdimseriesNames, (int) OWC.CHARTSPECIALDATASNUM.CHDATALIAL, STRSERIESNAME);</p> <p>// Givecation ObjChart.seriesCollection [0] .SetData (Owc.ChartdimensionSenum.chdimcategories, (int) owc.chartspecialDataSourcesenum.chdataral, strcategory;</p> <p>// setpoint objChart.SeriesCollection [0] .SetData (OWC.ChartDimensionsEnum.chDimValues, (int) OWC.ChartSpecialDataSourcesEnum.chDataLiteral, strValue);. // output into GIF files string strAbsolutePath = (Server.MapPath ( "." )) "//i//test.gif"; Objcspace.exportPicture (StrapSolutePath, "GIF", 600, 350);</p> <p>// Create a relative path to the GIF file. String strreLativePath = "./i/test.gif";</p> <p>// Add the picture to the PlaceHolder. String strimagetag = "<img src = '" strreLativePath "' />"; chartholder.controls.add (new literalcontrol (strimagetag));}</p> <p>#Region Web Form Designer Generated Code Override Protected Void OnNit (Eventargs E) {// // Codegen: This call is necessary for the ASP.NET Web Form Designer. // InitializeComponent (); base.oninit (e);</p> <p>/// <summary> /// Designer supports the required method - do not use the code editor to modify the // / this method. /// </ summary> private () {this.load = new system.eventhandler (this.page_load);} #ENDREGON}</p> <p>If you use the ADO.NET DataSet object, you can generate a string split by tab:</p> <p>Strvalue = (nodes.Item (j) .ChildNodes.Item (0) .innerText '/ t'); strcategory = (nodes.Item (j) .innertext '/ t' );</p></div><div class="text-center mt-3 text-grey"> 转载请注明原文地址:https://www.9cbs.com/read-66943.html</div><div class="plugin d-flex justify-content-center mt-3"></div><hr><div class="row"><div class="col-lg-12 text-muted mt-2"><i class="icon-tags mr-2"></i><span class="badge border border-secondary mr-2"><h2 class="h6 mb-0 small"><a class="text-secondary" href="tag-2.html">9cbs</a></h2></span></div></div></div></div><div class="card card-postlist border-white shadow"><div class="card-body"><div class="card-title"><div class="d-flex justify-content-between"><div><b>New Post</b>(<span class="posts">0</span>) </div><div></div></div></div><ul class="postlist list-unstyled"> </ul></div></div><div class="d-none threadlist"><input type="checkbox" name="modtid" value="66943" checked /></div></div></div></div></div><footer class="text-muted small bg-dark py-4 mt-3" id="footer"><div class="container"><div class="row"><div class="col">CopyRight © 2020 All Rights Reserved </div><div class="col text-right">Processed: <b>0.059</b>, SQL: <b>9</b></div></div></div></footer><script src="./lang/en-us/lang.js?2.2.0"></script><script src="view/js/jquery.min.js?2.2.0"></script><script src="view/js/popper.min.js?2.2.0"></script><script src="view/js/bootstrap.min.js?2.2.0"></script><script src="view/js/xiuno.js?2.2.0"></script><script src="view/js/bootstrap-plugin.js?2.2.0"></script><script src="view/js/async.min.js?2.2.0"></script><script src="view/js/form.js?2.2.0"></script><script> var debug = DEBUG = 0; var url_rewrite_on = 1; var url_path = './'; var forumarr = {"1":"Tech"}; var fid = 1; var uid = 0; var gid = 0; xn.options.water_image_url = 'view/img/water-small.png'; </script><script src="view/js/wellcms.js?2.2.0"></script><a class="scroll-to-top rounded" href="javascript:void(0);"><i class="icon-angle-up"></i></a><a class="scroll-to-bottom rounded" href="javascript:void(0);" style="display: inline;"><i class="icon-angle-down"></i></a></body></html><script> var forum_url = 'list-1.html'; var safe_token = '73vsklE_2B90edz_2Bwf67ZGnC7yTfe3noDjx_2FbrHvduRXZfNDqhFsMBVhpyhZizRZVI_2BBt6qqbvtN3d4Gg_2F'; var body = $('body'); body.on('submit', '#form', function() { var jthis = $(this); var jsubmit = jthis.find('#submit'); jthis.reset(); jsubmit.button('loading'); var postdata = jthis.serializeObject(); $.xpost(jthis.attr('action'), postdata, function(code, message) { if(code == 0) { location.reload(); } else { $.alert(message); jsubmit.button('reset'); } }); return false; }); function resize_image() { var jmessagelist = $('div.message'); var first_width = jmessagelist.width(); jmessagelist.each(function() { var jdiv = $(this); var maxwidth = jdiv.attr('isfirst') ? first_width : jdiv.width(); var jmessage_width = Math.min(jdiv.width(), maxwidth); jdiv.find('img, embed, iframe, video').each(function() { var jimg = $(this); var img_width = this.org_width; var img_height = this.org_height; if(!img_width) { var img_width = jimg.attr('width'); var img_height = jimg.attr('height'); this.org_width = img_width; this.org_height = img_height; } if(img_width > jmessage_width) { if(this.tagName == 'IMG') { jimg.width(jmessage_width); jimg.css('height', 'auto'); jimg.css('cursor', 'pointer'); jimg.on('click', function() { }); } else { jimg.width(jmessage_width); var height = (img_height / img_width) * jimg.width(); jimg.height(height); } } }); }); } function resize_table() { $('div.message').each(function() { var jdiv = $(this); jdiv.find('table').addClass('table').wrap('<div class="table-responsive"></div>'); }); } $(function() { resize_image(); resize_table(); $(window).on('resize', resize_image); }); var jmessage = $('#message'); jmessage.on('focus', function() {if(jmessage.t) { clearTimeout(jmessage.t); jmessage.t = null; } jmessage.css('height', '6rem'); }); jmessage.on('blur', function() {jmessage.t = setTimeout(function() { jmessage.css('height', '2.5rem');}, 1000); }); $('#nav li[data-active="fid-1"]').addClass('active'); </script>