Home > Developer > JavaScript
JsChart component Usage Details
What is JsChart?
JSChart is a JS component that can generate icons on webpages and is often used for statistics.
Use JsChart
I. Import jscharts. js
II. Compile the jscharts. jsp test page
1. Download The JScharts library and download the JScharts library from the official website. We use the jscharts. js file in the compressed package. It is about 150KB.
Use the JScharts library to include the JScharts library in the webpage file (.html or. jsp.
<script type="text/javascript" src="js/jscharts.js"></script>
Define the container to display the image generated by JScharts on the webpage file. You need to put the image into the webpage container. We usually use this webpage container
Label, and the unique ID value must be specified for this DIV element. For example:
<Div id = "chartcontainer"> displays graphical reports. </div>
Note: The content in the DIV container is replaced by the JScharts image.
Below the JScharts image, 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.
<Script type = "text/javascript"> var myData = new Array (["item 1", 20], ["item 2", 10], ["item 3 ", 30], ["Product 4", 10], ["product 5", 5]); var myChart = new JSChart ('chartcontainer ', 'line'); myChart. setDataArray (myData); myChart. draw (); </script>
5. Detailed instructions
<Body> <div id = "chartcontainer"> displays graphical reports. </div> <script type = "text/javascript"> // supports two-dimensional js arrays and json formats., xml format data source var myData = new Array (["item 1 ", 20], ["product 2", 10], ["Product 3", 30], ["Product 4", 10], ["product 5", 5]); // The second parameter values include line, bar, and pie, indicating that the report var myChart = new JSChart ('chartiner iner ', 'line'); // data source Processing Method 1: setDataArray (myData) uses js array // myChart. setDataArray (myData); // data source Processing Method 2: setDataJSON uses json Format data // myChart. setDataJSON ("data. json "); // data source processing method 3: setDataXML uses xml format data myChart. setDataXML ("data. xml "); myChart. setTitle ('test Report'); myChart. draw (); </script> <! -- Var myChart = new JSChart ('chart _ iner ', $ ("# type "). val (), ''); setAxisColor (string hexcolor) sets the axis color, which is invalid for the pie chart. The parameter is a hexadecimal color value. Resize (integer x, integer y) resets the chart size. The default value x/y is 400px/300px, and the new value is an integer multiple of the default value. setAxisNameColor (string hexcolor) sets the axis name color, which is invalid for the pie chart. SetAxisNameFontSize (integer fontsize) indicates the font size of the Axis name, which is invalid for the pie chart. The default value is 11. SetAxisNameX (string axisname) is used to set the name of the X axis, which is invalid for the pie chart. SetAxisNameY (string axisname) indicates the name of the Y axis, which is invalid for the pie chart. SetAxisPaddingBottom (integer padding) sets the distance between the X axis and the bottom of the container. The default value is 30. SetAxisPaddingLeft (integer padding) sets the distance between the Y axis and the left of the container. The default value is 40. SetAxisPaddingRight (integer padding) sets the distance between the right side of the chart and the container. The default value is 30. SetAxisPaddingTop (integer padding) sets the distance between the upper part of the chart and the container. The default value is 30. SetAxisValuesColor (string hexcolor) sets the color of the x/y axis value scale value, which is invalid for the pie chart. SetAxisValuesDecimals (integer decimals) is used to set the x/y axis value of the curve, or the Y axis value of the column chart. It is invalid for the pie chart. The default value is auto. SetAxisValuesFontSize (integer fontsize) is used to set the font size of the values on the two axes, which is invalid for the pie chart. SetAxisValuesNumberX (integer number) is used to set the number of values displayed on the X axis. This value is automatically adjusted and is invalid for the pie chart. SetAxisValuesNumberY (integer number) is used to set the number of values displayed on the X axis. This value is automatically adjusted and is invalid for the pie chart. SetAxisWidth (integer width) sets the axis width. The default value is 2. SetBackgroundColor (string hexcolor) sets the background color of the entire chart. The default value is # FFF. SetBackgroundImage (string filename) sets the background image of the chart. The image is automatically repeated along the two axes. SetBarBorderColor (string hexcolor) is used to set the color of the bar border of a bar chart, which is only valid for the column chart. The default value is # C4C4C4. SetBarBorderWidth (integer width) is used to set the Border width of a bar chart, which is only valid for a column chart. SetBarColor (string hexcolor) sets the color of all the rectangles in the column chart. This function is rewritten by the colorize () function and is only valid for the column chart. SetBarOpacity (float opacity) sets the transparency of the bar chart. The value ranges from 0 ~ 1. The default value is 0.9. SetBarSpacingRatio (integer ratio) is used to set the rectangle spacing of a bar chart, so as to control the width of the bar chart. The value ranges from 0 ~ An integer between 100. The default value is 10. SetBarValues (boolean values) sets whether to display values at the top of the rectangle. SetBarValuesColor (string hexcolor) sets the color of the rectangle value of the bar chart. SetBarValuesDecimals (integer decimals) sets the height of the rectangle in the bar chart. The value is in decimal format. The default value is auto. SetBarValuesFontSize (integer fontsize) is used to set the font size of the rectangle value of the bar chart. The default value is 8. setCanvasIdPrefix (string prefix), which is the ID prefix of Custom production elements. The default value is JSChart. SetDataArray (array data, string id) imports data into charts in the form of arrays. The id parameter is optional and the same id can be set. SetDataXML (string filename) imports data to charts in xml format. SetFlagColor (string hexcolor) sets the color for the prompt flag. SetFlagOffset (integer offset) sets the offset of the prompt flag, which is only applicable to pie charts. SetFlagOpacity (float opacity) sets the transparency of the prompt flag, 0 ~ 1. The default value is 0.5. setFlagRadius (integer radius) sets the radius of the prompt flag. The default value is 3. setFlagWidth (integer width) indicates the Border width of the flag. The default value is 1. setGraphExtend (boolean extend) sets whether to enable the chart Extension function. The default value is false. If it is enabled, the dual axis and gridline will expand to 1/15 of the current length, which makes the style more beautiful. setGraphLabel (string label) sets the watermark label text of a custom chart. SetGraphLabelColor (string hexcolor) is used to set the color of the watermark label of a custom chart. SetGraphLabelFontSize (integer fontsize): Set the font size of the watermark label of the custom chart. The default value is 8. setGraphLabelOpacity (float opacity. SetGraphLabelPosition (string position) is used to set the position of the watermark label of a custom chart. The value ranges from nw, ne, sw, and se to four corners. The default value is ne, that is, the upper right corner. SetGraphLabelShadowColor (string hexcolor) sets the shadow color of the watermark label of the custom chart. SetGrid (boolean grid) sets whether to display grid lines. SetGridColor (string hexcolor) sets the gridline color. The default value is # C6C6C6. SetGridOpacity (float opacity) sets the gridline transparency. The value ranges from 0 ~ 1. The default value is 0.5. SetIntervalEndX (integer end) sets the end value of the X axis. If the start value is set, this value must be greater than the start value. SetIntervalEndY (integer end) sets the end value of the Y axis. If the start value is set, this value must be greater than the start value. SetIntervalStartX (integer start) sets the start value of the X axis. If the end value is set, this value must be smaller than the end value. SetIntervalStartY (integer start) sets the start value of the Y axis. If the end value is set, this value must be smaller than the end value. SetLabelX (array label) adds a label on the X axis. The parameter is an array composed of two values. The first parameter is the position of the label on the X axis, the second value is the Label display content. SetLabelY (array label) adds a label on the Y axis. Its parameter is an array composed of two values. The first parameter is the position of the label on the Y axis, the second value is the Label display content. SetLineColor (string hexcolor, string id) sets the curve color in the curve. See the graph example 3. setLineOpacity (float opacity, string id) to set the curve transparency in the graph. The value ranges from 0 ~ 1. The default value is 0.9. The parameter id is the same as the parameter id. SetLineWidth (integer width, string id): Set the width of the curve in the curve. The default value is 2. setPieOpacity (float opacity). The value ranges from 0 ~ 1. The default value is 1. setPiePosition (integer x, integer y) sets the position of the pie chart in the container. The default value is 0, which is located in the center of the container. setPieRadius (integer radius) sets the radius of the pie chart. SetPieUnitsColor (string hexcolor) sets the color of the pie chart block name. SetPieUnitsFontSize (integer fontsize) sets the font size of the pie chart block name. SetPieUnitsOffset (integer offset) is used to set the position of the pie chart block name. The integer value is removed externally and the negative value is moved internally. SetPieValuesColor (string hexcolor) sets the color of the pie chart value. SetPieValuesDecimals (integer decimals) sets the total value of the pie chart. SetPieValuesFontSize (integer fontsize) sets the font size of the values on the pie chart. SetPieValuesOffset (integer offset) is used to set the offset of values on the pie chart. this parameter is an integer that has been removed from the pie chart. The default value is-20. Whether setShowXValues (boolean show) displays the scale value on the X axis. Whether setShowYValues (boolean show) displays the scale value on the Y axis. SetSize (integer x, integer y) pre-defined container size, which must be prior to the draw () function. SetTextPaddingBottom (integer padding) sets the distance between the label text and the container on the X axis. The default value is 1. setTextPaddingLeft (integer padding) sets the distance between the label text and the left side of the container on the Y axis. The default value is 8. setTextPaddingTop (integer padding) sets the distance between the top of the chart and the top of the container. The default value is 15. setTitle (string title) sets the chart title. The default value is "JSChart ". SetTitleColor (string hexcolor) sets the title Color. SetTitleFontSize (integer fontsize) sets the title Font size. SetTitlePosition (string position) specifies the title position. The value range is center, left, right .). SetTooltip (array tooltip) sets the prompt on the X axis. SetTooltipBackground (string hexcolor) sets the prompt background. SetTooltipBorder (string css) indicates the style of the background border. The parameter is a css expression. The default value is 1px solid # d3d3d3. SetTooltipFontColor (string hexcolor) sets the color of the prompt content. SetTooltipFontFamily (string font) sets the font style of the prompt. The default value is arial. setTooltipFontSize (integer fontsize). The default value is 12. setTooltipOffset (integer offset), and the default value is 7. SetTooltipOpacity (float opacity) sets the display transparency. The default value is 0.7. setTooltipPadding (string css). The default value is 2px 5px. SetTooltipPosition (string position) sets the prompt position. The value range is nw, ne, sw, and se. The default value is se. SetLegendShow (boolean show) sets whether to display the legend --> </body> used to count the purchase amount of each supplier for a specified period of time using selectsupplier. jspaction: @ Resource private AccountRecordsService accountRecordsService; @ RequestMapping ("/selectSupplier") @ ResponseBody public Object selectSupplier (String start, String end) {System. out. println ("start:" + start + "| end:" + end); Map <String, String> paramMap = new HashMap <String, String> (); paramMap. put ("start", start); pa RamMap. put ("end", end); return accountRecordsService. selectSupplier (paramMap);} public interface AccountRecordsService extends BaseService <AccountRecords> {List <Map <String, Object> selectSupplier (Map <String, String> paramMap );} @ Service ("accountRecordsService") public class AccountRecordsServiceImpl extends BaseServiceImpl <AccountRecords> implements AccountRecordsService {@ Override public List <Map <String, Object> selectSupplier (Map <String, String> paramMap) {// TODO Auto-generated method stub return accountRecordsMapper. selectSupplier (paramMap) ;}} public interface AccountRecordsMapper extends BaseMapper <AccountRecords >{list <Map <String, Object> selectSupplier (Map <String, String> paramMap );} <select id = "selectSupplier" parameterType = "map" resultType = "map"> <! [CDATA [select sum (ar_payable) total, sup_name from account_records inner join supplier on account_records.sup_id = supplier. sup_id where ar_date >#{ start} and ar_date <=#{ end} and ar_bus_type = 'bo' group by sup_name]> </select> select sum (ar_payable) total, sup_name from account_records inner join supplier on account_records.sup_id = supplie
Summary
The above is a detailed description of the JsChart component used by the editor. I hope it will help you. If you have any questions, please leave a message. The editor will reply to you in time!
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
