Use VML production statistics full Raiders
---- Cake
Author: Blue Wings CBS account: liuruhong (blue streetlights)
Email: liuruhong@263.net msn: blueswing_liu@hotmail.com Keywords: VML JavaScript OOP chart
Summary:
VML is the vector graphic implementation of Microsoft IE 5.0 and its subsequent versions, although MS also advocates the use of SVG in the future, but as an IE embedded markup, at some time the application is still more convenient. This article shows the establishment of a statistical pie chart through complete description, showing the charm of VML in web. By implementing a JavaScript class, the reader can completely see the production process of the entire pie chart.
VML (Vector Markup Language) has seen in silently since the adventure, until now, the situation still has no change. In fact, you can find that in terms of Web, MS has a built-in use, the most typical is Office's self-selected graphics, store the Word or PPT document into html, if you use a self-selected graphic inside the document, you will You can see that the graphics use VML, and another typical application is Visio's export to the web.
Some time ago, James published an example of using the ASP to generate a chart in CBS. I also read the code, and also for some questions, I asked him, James's color felt very good, but unfortunately I didn't have the same skill, so In the code implementation, I use a random color to implement, and the overall interface can look slightly more powerful.
The statistical comparison is the pie chart, the histogram, and the graph, this paper focuses on the production process of the PIE. The article uses JavaScript to implement a class. If the relevant JavaScript is not particularly known, you can refer to my additional article " Object's JavaScript programming "and" re-object-oriented JavaScript programming ".
Don't consider how to implement it, let's take a look at the final use of the code.
Objpie = new VMLPIE ("600px", "450px", "demographic"); // Initialization width, height, title
Objpie.borderwidth = 3; // Chart Border
Objpie.bordercolor = "blue"; // Chart Border Color
Objpie.width = "800px"; // Define the width of the chart
Objpie.height = "600px"; // Define the height of the chart
Objpie.backgroundcolor = "# ffffff"; // Define background color
Objpie.shadow = true; // Do you need a shadow TRUE to be false?
// Add chart data
// Sequence is name, value, description
Objpie.adddata ("Beijing", 50, "Beijing's population");
Objpie.adddata ("Shanghai", 52, "Shanghai fixed population");
Objpie.Adddata ("Tianjin", 30, "Tianjin's field population");
Objpie.adddata ("Xi'an", 58, "Xi'an City Population");
Objpie.adddata ("Wuhan", 30, "Wuhan's field population");
Objpie.adddata ("Chongqing", 58, "Chongqing City Population");
Result.innerhtml = Objpie.draw (); // Generate VML data
This code is the final call, I encapsulated a VMLPie's JavaScript class, and the focus of this article is to describe the specific implementation process of the class, and the VML must be used as the following statement.
1. HTML TAG's namespace declaration
2.
STYLE statement