JSChart lightweight graphical reporting tool (Chinese reference for built-in functions)

Because there are not many articles about this framework on the Internet, and it does not support Chinese well. The manuals and other articles are in English. Although there are not many articles, however, some new users may not have time and energy to read the reference manual. In order to let more friends know about it, they probably translated its built-in functions after work, because of the rush of time, in some cases, the translation is very rough, and it is inevitable that some errors are mixed. I hope you can test the translation by yourself if you do not understand it. It is easy to get started by referring to the official examples provided by Alibaba Cloud.

JSChart built-in function reference

ColorizeBars (array colordata) sets the rectangle color of each bar chart.
ColorizePie (array colordata) sets the color of each pie chart.
Draw () is used at the end. After each setting is complete, execute this function to draw a chart.
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) is used to set the color of the x/y axis 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): Set the font size of the rectangle value of the bar chart. The default value is 8.
SetCanvasIdPrefix (string prefix) is used to customize the ID prefix of the production element. The default value is JSChart. This value does not need to be modified.
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) sets the transparency of custom chart watermark labels.
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 graph example 3.
SetLineOpacity (float opacity, string id) sets the curve transparency in the curve. 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) sets the transparency of the pie chart. 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) indicates the font style. The default value is arial.
SetTooltipFontSize (integer fontsize) sets the font size of the prompt content. The default value is 12.
SetTooltipOffset (integer offset) sets the message content offset. The default value is 7.
SetTooltipOpacity (float opacity) sets the message transparency. The default value is 0.7.
SetTooltipPadding (string css) indicates the padding style. 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.

-- Finished

The official JSChart website http://www.jscharts.com/has a detailed manual and example.

For the disadvantages that JSChart does not support Chinese characters, some experts have already provided extended scripts, which can be easily found on the Internet. You can download them here.
After downloading, You can reference only jscharts_mb.js, jscharts. js, and jscharts. plug. mb. js. You can choose either of the two methods.