Author: chszs, reprinted with note. Blog homepage: http://blog.csdn.net/chszs
1. Introduction to jschartsJscharts is a javascript toolkit for directly drawing charts in a browser. Jscharts supports bar charts, pie charts, and linear charts. You can directly insert this graph into a webpage. The data of the jscharts graph can be from XML files, JSON files, or Javascript array variables. Jscharts is compatible with all mainstream browsers and does not require any server plug-ins or modules. It is a pure JavaScript component and is free of charge (including watermarks ).
Jscharts is a billing tool. for non-commercial use, the fee is USD 39/1 domain. for commercial use, the fee is USD 79/1 domain. Available for free. The free version includes watermarks. To delete a watermark, a domain key is required.
Ii. New Features of jscharts1. Support for 3D pie charts or 3D column charts
2. Multi-series bar chart
3. Horizontal Bar Chart
4. Linear graphs support animated display
5. New Custom Method
The latest version of jscharts is version 3.06.
Supported browsers include chrome 10 or above, chrome 1.5 or above, IE 8 or above, Safari 3.1 or above, and opera 9 or above.
Iii. jscharts User Guide 1. Download The jscharts LibraryDownload the jscharts library from the official website. We use the jscharts. js file in the compressed package. It is about 150kb.
2. Use the jscharts LibraryThe webpage file (such as .html or. jsp) contains the jscharts library.
<Scripttype = "text/JavaScript" src = "JS/jscharts. js"> </SCRIPT>
3. Define a containerTo display the image generated by jscharts on a webpage file, you need to put the image into a webpage container. The webpage container is usually defined by the <div> label, and a unique ID value must be specified for this Div element. For example:
<Divid = "chartcontainer"> This is just a replacement in case when criptis not available or used for Seo purposes </div>
Note: The content in the DIV container is replaced by the jscharts image.
4. Display jscharts ImagesBelow, we need to write a small amount of code to display a linear graph. First, prepare the data required for the image. We can use a JavaScript array to provide data. Each element in the array is composed of two elements.
The Code is as follows:
<Scripttype = "text/JavaScript">
Varmydata = new array ([10, 20], [15, 10], [20, 30], [25, 10], [30, 5]);
Varmychart = new jschart ('chart _ iner ', 'line ');
MyChart. setdataarray (mydata );
MyChart. Draw ();
</SCRIPT>
The complete code is as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">5. view the results in the browser1) linear diagram
View the above file in a browser. The result is as follows:
2) bar chart
Run the following code:
Varmydata = new array ([10, 20], [15, 10], [20, 30], [25, 10], [30, 5]);
Varmychart = new jschart ('chartiner iner ', 'line ');
Changed:
Varmydata = new array (['unit 1', 20], ['unit 2', 10], ['unit 3', 30], ['unit 4 ', 10], ['unit 5', 5]);
Varmychart = new jschart ('chartiner iner ', 'bar ');
It is shown as follows:
3) pie chart
Run the following code:
Varmychart = new jschart ('chartiner iner ', 'bar ');
Changed:
Varmychart = new jschart ('chartiner iner ', 'pie ');
It is shown as follows:
6. jscharts Data SourceThe data required by jscharts images can be derived from JSON files or XML files in addition to JavaScript arrays.
1) JavaScript Array provides data code:
MyChart. setdataarray (mydata );
2) Code provided by the JSON file:
MyChart. setdatajson ('data. json ');
The content of the Data. JSON file is as follows:
{"JSChart" : {"datasets" : [{"type" : "pie","data" : [{"unit" : "Unit_1","value" : "20"},{"unit" : "Unit_2","value" : "10"},{"unit" : "Unit_3","value" : "30"},{"unit" : "Unit_4","value" : "10"},{"unit" : "Unit_5","value" : "5"}]}]}}3) code for providing data in the XML file:
MyChart. setdataxml ('data. xml ');
The content of the Data. xml file is as follows:
<?xml version="1.0"?><JSChart><dataset type="pie"><data unit="Unit_1" value="20"/><data unit="Unit_2" value="10"/><data unit="Unit_3" value="30"/><data unit="Unit_4" value="10"/><data unit="Unit_5" value="5"/></dataset></JSChart>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
