Talking about the Application of Teechart Components in ASP
Since the Teechart VCL version is widely used in a variety of development environments and well-recognized, STEEMA SOFTWARE SL has developed Teechart Pro ActiveX in October 1997. For the development mode of B / S is undoubtedly a good news, because it only needs to be installed on the server side, the client does not need to install additional software, as long as you use a universal browser to display the statistics graphics, the city is even more Welcome.
Below we combine ASP technology to introduce the usual properties and applications of Teechart Pro V5 ActiveX components.
Let's first look at the two-dimensional histogram example of the TEECHART component to display the "quarter sales" situation:
<% '----------- Teecharteg.asp ------------------------
Set tchart1 = createObject ("teechart.tchart")
TCHART1.HEADER.TEXT (0) = "Statistics of Sales Quarter"
TCHART1.ADDSeries (1)
TCHART1.ASPECT.VIEW3D = 0
TCHART1.SERIES (0) .clear
TCHART1.SERIES (0) .add 180, "1 quarter", RGB (35, 70, 128)
Tchart1.series (0) .add 240, "2 quarter", RGB (255, 80, 128)
Tchart1.series (0) .add 210, "3 Quarter", & HFACE87
Tchart1.series (0) .add 280, "4 Quarter", 16777215
Tchart1.export.savetojpegfile server.mappath ("MyChart.jpg"), False, JPEGBestQuality, 100, Tchart1.Width, Tchart1.height
Set tchart1 = nothing
%>
1) The same way as the ASP other components is the same, first create an object.
Set tchart1 = createObject ("teechart.tchart")
2) Use its attribute to display a static statistical graphic.
TCHART1.HEADER.TEXT (0) = "Statistics of Sales Quarter"
......
Tchart1.series (0) .add 210, "3 Quarter", & HFACE87
Tchart1.series (0) .add 280, "4 Quarter", 16777215
3) Generate a statistical graphic file
Tchart1.export.savetojpegfile server.mappath ("MyChart.jpg"), False, JPEGBestQuality, 100, Tchart1.Width, Tchart1.height
4) Release the object
Set tchart1 = nothing
Many properties of the object class in the above example are default, we can add settings based on the specific situation. Let's take a detailed introduction to other common attributes of the Teechart component (listed in the form of program comments)
Attribute method of the Teechart object introduction </ Title> </ hEAD></p>
<p><Body></p>
<p><%</p>
<p>Set tchart1 = createObject ("teechart.tchart") tChart1.height = 440 'The height of the entire chart</p>
<p>TCHART1.WIDTH = 500 'The width of the entire chart</p>
<p>'Tchart1.header.text.clear</p>
<p>'TChart1.Header.Text.add "Quarter Sales Survey"' chart title, the way TCHART1.HEADER.TEXT (0) = "Title" form</p>
<p>TCHART1.HEADER.FONT.SIZE = 22 'Title Font Size</p>
<p>TCHART1.HEADER.FONT.BOLD = TRUE 'The title font is bold</p>
<p>Tchart1.Header.font.italic = true '标题 字否 体</p>
<p>TCHART1.PANEL.MARGINLINLINLINLINLINLINLINLINLINLINEFT = 3 'Chart left margin</p>
<p>TCHART1.PANEL.GRADIENT.Visible = True 'Is there a background</p>
<p>TCHART1.PANEL.GRADIENT.STARTCOLOR = & HB3DEF 'Chart color start color</p>
<p>TCHART1.PANEL.GRADIENT.EndColor = & HFACE87 'Chart color end color</p>
<p>TCHART1.PANEL.BEVELWIDTH = 0 'Canvas to indent the amplitude</p>
<p>TCHART1.Addseries (0) 'Shows the way the graphics, the value range is 1 ~ 39</p>
<p>TCHART1.ASPECT.VIEW3D = false 'false represents 2D graphics, true representation 3D graphics</p>
<p>TCHART1.ASPECT.CHART3DPERCENT = 10 'If it is 3D graphics, it indicates its inclination.</p>
<p>TCHART1.ASPECT.ZOOM = 100 'graphic display ratio</p>
<p>TCHART1.ASPECT.ORTHOGONAL = True '3d chart</p>
<p>TCHART1.ASPECT.ROTATION = -20 'If the chart is a side turn, the horizontal side turn angle -360 ~ 360</p>
<p>TCHART1.ASPECT.ELEVATION = 0 'If the chart is a side turn, the front and rear side turn angles - 360 ~ 360</p>
<p>TCHART1.ASPECT.PERSPECTIVE = 0 '3D graphics level aggregation level</p>
<p>TCHART1.ASPECT.CHART3DPERCENT = 20 '3D graphics thickness 1 ~ 100</p>
<p>TCHART1.WALLS.BOTTOM.SIZE = 5 'If it is a 3D graphic, it indicates that its horizontal thickness</p>
<p>TCHART1.WALLS.BOTTOM.COLOR = RGB (35, 70, 128) 'Base Color</p>
<p>TCHART1.WALLS.BOTTOM.TRANSPARENT = true 'is 3D graphics, the base is transparent TCHART1.WALLS.BACK.PEN.Visible = true' Participation Border Shows TCHART1.WALLS.LEFT.SIZE = 5 'If it is 3D graphics, Hand sitting thickness</p>
<p>TCHART1.WALLS.LEFT.COLOR = 8454143 'Longitudinal coordinate color</p>
<p>TCHART1.WALLS.LEFT.TRANSPARENT = true 'is a 3D graphic, whether the ordinate wall is transparent</p>
<p>TCHART1.LGEND.Visible = true 'Whether to display the legend</p>
<p>TCHART1.LEGEND.VERTSPACING = 9 'Legend Frame Height</p>
<p>TCHART1.DIVIDINGLINGLINGLINES.Visible = false 'legendary interval</p>
<p>'Tchart1.series (0) .clear</p>
<p>'Tchart1.series (0) .ColoreachPoint = true</p>
<p>'Tchart1.series (0) .ADD 180, "1 quarter", RGB (35, 70, 128)' Static to add display data in the chart, parameter is numerical size, name, color</p>
<p>'Tchart1.series (0) .add 240, "2 Quarter", 255</p>
<p>'Tchart1.series (0) .add 210, "3 Quarter", & HFace87</p>
<p>Tchart1.series (0) .add 280, "4 Quarter", 16777215</p>
<p>TCHART1.AXIS.DEPTH.Visibl E = false 'When the axle is 3D transparent, whether the inner wall is displayed</p>
<p>TCHART1.AXIS.DRAWAXESBEFORESERIES = FALSE 'The grid is displayed before the map</p>
<p>TCHART1.AXIS.LEFT.TITLE.CAPTION = "Value (unit: 10,000 yuan)" 'longitudinal axis heading</p>
<p>TCHART1.AXIS.LEFT.TITLE.FONT.BOLD = TRUE 'Whether the longitudinal shaft title is bold</p>
<p>TCHART1.AXIS.LEFT.TITLE.FONT.SIZE = 9 'Longitudinal shaft header size</p>
<p>TCHART1.AXIS.LEFT.TITLE.Visible = true 'Whether to display a set of ordinate</p>
<p>Tchart1.Axis.Labels.angle = 90 'longitudinal status tilt angle</p>
<p>TCHART1.AXIS.LEFT.GRIDPEN.Visible = True 'Is the abscissa parameter shaft display</p>
<p>TCHART1.AXIS.BOTTOM.TITLE.CAPTION = "Timeline" 'horizontal shaft title</p>
<p>TCHART1.AXIS.BOTTOM.TILE.FONT.BOLD = True 'Is the horizontal shaft header?</p>
<p>TCHART1.AXIS.BOTTOM.TILE.FONT.SIZE = 9 'horizontal shaft header size</p>
<p>TCHART1.AXIS.BOTTOM.LABELS.ANGLE = 0 'abscissive font tilt angle 0 ~ 360tchart1.axis.bottom.gridpen.visible = True' Biographical axis display</p>
<p>TCHART1.FOOTER.TEXT.ADD "under the title" under the chart</p>
<p>TCHART1.FOOTER.FONT.SIZE = 11 'under the title font size</p>
<p>Tchart1.footer.font.bold = true 'under the title font is bold</p>
<p>Tchart1.footer.font.italic = false 'Is the title font for a bevel?</p>
<p>Tchart1.export.savetojpegfile server.mappath ("mychart.jpg"), False, JPEGBESTQUAL, 100, TCHART1.WIDTH, TCHART1.HEIGHT 'Export Store is a MyChart.jpg file</p>
<p>Set tchart1 = nothing</p>
<p>%> <img src = "mychart.jpg"></p>
<p></ Body> </ html></p>
<p>Note: 1. TCHART1.Addseries (0) The property of the graphic display method is worth researching. Interested readers can test from 0 to 39 to find their ideal display.</p>
<p>2. For reference color, the RGB three methods, for example: RGB (255,255,255) = & HFFFFFF = 16777215. The specific conversion method is not described.</p>
<p>3. The property is TRUE and FALSE that can be used instead of 1 and 0.</p>
<p>For the addition of the group map, the following is listed in the following examples of the two sets of data.</p>
<p><% Set tchart1 = createObject ("teechart.tchart")</p>
<p>TCHART1.HEADER.TEXT (0) = "Quarter Sales" 'Title</p>
<p>TCHART1.ADDSeries (1)</p>
<p>TCHART1.ADDSeries (1)</p>
<p>Tchart1.series (0) .add 180, "1 quarter", RGB (255, 255, 255)</p>
<p>Tchart1.series (1) .add 240, "1 quarter", 255</p>
<p>TCHART1.SERIES (0) .add 280, "2 Quarter", RGB (255, 255, 255)</p>
<p>TCHART1.SERIES (1) .add 200, "2 Quarter", 255</p>
<p>TCHART1.SERIES (0) .add 150, "3 Quarter", RGB (255, 255, 255)</p>
<p>TCHART1.SERIES (1) .add 320, "3 Quarter", 255</p>
<p>TCHART1.SERIES (0) .add 360, "4 Quarter", RGB (255, 255, 255)</p>
<p>TCHART1.SERIES (1) .add 200, "4 Quarter", 255</p>
<p>TCHART1.SERIES (0) .MARKS.Visible = true 'Displays data title</p>
<p>TCHART1.SERIES (0) .MARKS.Style = 0 'Data Display style 0 ~ 9, 0 is numerical, 1 is% ...</p>
<p>TCHART1.SERIES (1) .MARKS.Style = 0</p>
<p>Tchart1.Export.savetojpegfile server.mappath ("mychart.jpg"), False, JPEGBESTQUAL, 100, TCHART1.WIDTH, TCHART1.HEIGHTSET TCHART1 = Nothing</p>
<p>%></p>
<p>The above two examples are static production statistics, and then display. However, in actual work, more is displayed from the existing databases to read dynamic statistics. Let's take an example of using ADO directly connecting access to Access databases, dynamically displaying results. The database is (TEST.MDB), two columns of tables are colname, colvalue. The Month Name and the corresponding statistical data colname (January, February, ...), Colvalue (103, 210, ...):</p>
<p><% DIM OUTPUTSTREAM</p>
<p>Set tchart1 = createObject ("teechart.tchart")</p>
<p>TCHART1.HEADER.TEXT (0) = "Quarter Sales" 'Title</p>
<p>TCHART1.Addseries (0) 'The value of the display graph is 1 ~ 39</p>
<p>Set</p>
<p>Conn</p>
<p>= Server.createObject ("AdoDb.Connection")</p>
<p>SET RST = Server.createObject ("AdoDb.Recordset")</p>
<p>Conn.open "Driver = {Microsoft Access Driver (* .mdb)}; dbq =" & Server.mappath ("zcw.mdb")</p>
<p>strsql = "SELECT * from test"</p>
<p>Rst.Open Strsql, CONN, 1, 1</p>
<p>IF RST.Recordcount> 0 THEN</p>
<p>TCHART1.SERIES (0) .datasource = RST</p>
<p>Tchart1.series (0) .Labelssource = "colname"</p>
<p>TCHART1.SERIES (0). Yvalues.valuesource = "colvalue"</p>
<p>Else</p>
<p>Tchart1.series (0) .fillsamplevalues (12)</p>
<p>TCHART1.HEADER.TEXT (0) = "No result, random display data"</p>
<p>END IF</p>
<p>TCHART1.SERIES (0) .MARKS.Visible = TRUE</p>
<p>TCHART1.SERIES (0) .MARKS.Style = 4</p>
<p>Tchart1.export.savetojpegfile server.mappath ("MyChart.jpg"), False, JPEGBestQuality, 100, Tchart1.Width, Tchart1.height</p>
<p>Set tchart1 = nothing</p>
<p>Rst.Close</p>
<p>Set</p>
<p>Conn</p>
<p>= Nothing</p>
<p>%> <img src = "mychart.jpg"></p>
<p>The above three instances are displayed after generating a static JPG image file. If the value is not saved for the browsing result, we can use the PNG (Portable Network Graphics) mode.</p>
<p><% DIM ChartType, OutputStream, ViewType</p>
<p>Set Chart1 = CreateObject ("Teechart.tchart") Chart1.addSeries (0)</p>
<p>Chart1.series (0) .fillsamplevalues 20 'Random Generate Data</p>
<p>OutputStream = chart1.export.aspng.savetostream</p>
<p>Set chart1 = Nothing</p>
<p>Response.binaryWrite OutputStream</p>
<p>%></p>
<p>The above is a brief introduction to the combination of Teechart component attributes and ASP technology, I hope to help everyone. Teechart Pro Activex Free Trial Version can be downloaded from http://www.steema.com/download/download/download/download. Code examples of Teechart and ASP can be found at http://www.steema.com/products/teechart/asp/asphome.htm. If you have any opinions or opinions on this article, please contact Zcwmxn@sina.com.cn.</p></div><div class="text-center mt-3 text-grey">
转载请注明原文地址:https://www.9cbs.com/read-6172.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="6172" 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.044</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 = '9ieqV1S212E0V_2FdLVC7OePqRuCKi_2Bb1en4Q0WIFQHLQR4w1OHU_2FE2YEDBKo9fhLn31_2BNleV0IB78OoxGF5fHhw_3D_3D';
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>
