JSChart lightweight graphical report tool (Chinese reference for built-in functions)_javascript skills

Because there are not many articles about this framework on the Internet, and it does not support Chinese very well. The manuals are all in English. Although there are not many, but considering that some novices may not have the time and energy to read the reference manual, in order to make it more Many friends know it, so I roughly translated its built-in functions after work. Because of the rush of time, some places were translated very roughly, and there were inevitably some mistakes mixed in. It is considered as a way to attract others. I hope everyone can try their hand at what they don’t understand. Test it out and it’s easy to get started by referring to its official examples.

JSChart built-in function reference

colorizeBars(array colordata) sets the color of each rectangle in the histogram.
colorizePie(array colordata) sets the color of each block of the pie chart.
draw() is used at the end. After all settings are completed, execute this function to draw the chart.
setAxisColor(string hexcolor) sets the axis color, which is invalid for pie charts. The parameter is a hexadecimal color value.
resize(integer x, integer y) resets the chart size, the default x/y is 400px/300px, the new value should be an integer multiple of the default value.
setAxisNameColor(string hexcolor) sets the color of the axis name, for The pie chart is invalid.
setAxisNameFontSize(integer fontsize) sets the axis name font size, which is invalid for pie charts. The default is 11.
setAxisNameX(string axisname) sets the name of the x-axis, which is invalid for pie charts.
setAxisNameY(string axisname) sets the name of the y-axis, which is invalid for pie charts.
setAxisPaddingBottom(integer padding) sets the distance between the x-axis and the bottom of the container, the default is 30.
setAxisPaddingLeft(integer padding) sets the distance between the y-axis and the left margin of the container, the default is 40.
setAxisPaddingRight(integer padding) sets the distance between the right side of the chart and the container, the default is 30.
setAxisPaddingTop(integer padding) sets the distance between the top of the chart and the container, the default is 30.
setAxisValuesColor(string hexcolor) sets the color of the x/y axis value, which is invalid for pie charts.
setAxisValuesDecimals(integer decimals) sets the x/y axis value of the curve chart, or the y axis value of the bar chart. It is invalid for pie charts. The default is auto.
setAxisValuesFontSize(integer fontsize) sets the font size of the values ​​on the two axes, which is invalid for pie charts.
setAxisValuesNumberX(integer number) sets the number of values ​​displayed on the x-axis. This value will be automatically adjusted and is invalid for pie charts.
setAxisValuesNumberY(integer number) sets the number of values ​​displayed on the x-axis. This value will be automatically adjusted and is invalid for pie charts.
setAxisWidth(integer width) sets the width of the axis, the default is 2.
setBackgroundColor(string hexcolor) sets the background color of the entire chart, the default is #FFF.
setBackgroundImage(string filename) sets the background image of the chart, and the image will automatically repeat along the two axes.
setBarBorderColor(string hexcolor) sets the bar border color of the histogram. It is only valid for the histogram. The default is #C4C4C4.
setBarBorderWidth(integer width) sets the width of the histogram border, which is only valid for histograms.
setBarColor(string hexcolor) sets the color of all rectangles in the histogram. This function is overridden by the colorize() function and is only valid for histograms.
setBarOpacity(float opacity) sets the transparency of the histogram, the value is between 0 and 1, and the default is 0.9.
setBarSpacingRatio(integer ratio) sets the rectangular spacing of the histogram, thereby controlling the width of the histogram. The value is an integer between 0 and 100. The default is 10.
setBarValues(boolean values) sets whether to display values ​​at the top of the rectangle.
setBarValuesColor(string hexcolor) sets the color of the value of the histogram rectangle.
setBarValuesDecimals(integer decimals) sets the value of the rectangle height of the histogram. The value is a decimal number. The default is auto.
setBarValuesFontSize(integer fontsize) sets the font size of the histogram rectangular value, the default is 8.
setCanvasIdPrefix(string prefix) customizes the ID prefix of the production element, the default is JSChart, this value generally does not need to be modified.
setDataArray(array data, string id) imports data into the chart in the form of an array. The id parameter is optional and the same id can be set.
setDataXML(string filename) imports data into the chart in the form of xml.
setFlagColor(string hexcolor) sets the color for the prompt flag.
setFlagOffset(integer offset) sets the offset of the prompt flag, only applicable to pie charts.
setFlagOpacity(float opacity) sets the transparency of the prompt sign, between 0 and 1, the default is 0.5.
setFlagRadius(integer radius) sets the radius of the prompt sign, the default is 3.
setFlagWidth(integer width) sets the prompt Logo border width, default 1.
setGraphExtend(boolean extend) sets whether to turn on the chart extension function. The default is false. If turned on, the dual axes and grid lines will extend 1/15 of the current length, which can make the style more beautiful. Beautiful.
setGraphLabel(string label) sets the custom chart watermark label text.
setGraphLabelColor(string hexcolor) sets the custom chart watermark label color.
setGraphLabelFontSize(integer fontsize) sets the font size of the custom chart watermark label, the default is 8.
setGraphLabelOpacity(float opacity) sets the transparency of the custom chart watermark label.
setGraphLabelPosition(string position) sets the position of the custom chart watermark label. The value range is (nw, ne, sw, se). It is positioned in the four corners respectively. The default is ne, which is the upper right corner.
setGraphLabelShadowColor(string hexcolor) sets the shadow color of the custom chart watermark label.
setGrid(boolean grid) sets whether to display grid lines.
setGridColor(string hexcolor) sets the color of the grid lines, the default is #C6C6C6.
setGridOpacity(float opacity) sets the grid line transparency, the value is between 0 and 1, and the default is 0.5.
setIntervalEndX(integer end) sets the end value of the x-axis. If a starting value is set, this value must be greater than the starting value.
setIntervalEndY(integer end) sets the end value of the y-axis. If a starting value is set, this value must be greater than the starting value.
setIntervalStartX(integer start) sets the starting 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 starting 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. Its parameter is an array composed of two values. The first parameter is the position of the label on the x-axis, and the second value is the content displayed by the label.
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, and the second value is the content displayed by the label.
setLineColor(string hexcolor, string id) sets the color of the curve in the graph. See Curve Chart Example 3.
setLineOpacity(float opacity, string id) sets the transparency of the curve in the curve chart, the value is between 0 and 1, and the default is 0.9. The meaning of parameter id is the same as above.
setLineWidth(integer width, string id) sets the width of the curve in the graph, the default is 2.
setPieOpacity(float opacity) sets the transparency of the pie chart, the value is 0~1, the default is 1.
setPiePosition( integer x, integer y) sets the position of the pie chart within the container, the default 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) sets the position of the pie chart block name. Integers move out and negative numbers move in.
setPieValuesColor(string hexcolor) sets the color of pie chart values.
setPieValuesDecimals(integer decimals) sets the total value on the pie chart.
setPieValuesFontSize(integer fontsize) sets the font size of the values ​​on the pie chart.
setPieValuesOffset(integer offset) sets the offset of the value on the pie chart. Integers move outwards and negative numbers move inward. The default is -20.
setShowXValues(boolean show) whether to display the scale value on the x-axis.
setShowYValues(boolean show) whether to display the scale value on the y-axis.
setSize(integer x, integer y) predefines the size of the container and needs to be used before the draw() function.
setTextPaddingBottom(integer padding) sets the distance between the label text on the x-axis and the bottom of the container, the default is 1.
setTextPaddingLeft(integer padding) sets the distance between the label text on the y-axis and the left side of the container, the default is 8.
setTextPaddingTop (integer padding) Set the distance between the top of the chart and the top of the container, the default is 15.
setTitle(string title) Set the title of the chart, the default is "JSChart".
setTitleColor(string hexcolor) sets the title color.
setTitleFontSize(integer fontsize) sets the title font size.
setTitlePosition(string position) sets the title position, value range (center, left, right.).
setTooltip(array tooltip) sets the tip on the x-axis.
setTooltipBackground(string hexcolor) sets the prompt background.
setTooltipBorder(string css) sets the prompt background border style. The parameter is a css expression. The default is 1px solid #d3d3d3.
setTooltipFontColor(string hexcolor) sets the color of the prompt content.
setTooltipFontFamily(string font) sets the prompt font style, the default is arial.
setTooltipFontSize(integer fontsize) sets the prompt content font size, the default is 12.
setTooltipOffset(integer offset) sets the prompt content offset, the default is 7.
setTooltipOpacity(float opacity) sets the tip transparency, the default is 0.7.
setTooltipPadding(string css) sets the tip padding style, the default is 2px 5px.
setTooltipPosition(string position) sets the tip position, the value range is nw, ne, sw and se, the default is se.

--Complete

JSChart official website http://www.jscharts.com/There is a complete manual and examples on it.

As for the shortcomings of JSChart not supporting Chinese, experts have already provided extension scripts, which are easy to find online and can be downloaded here.
After downloading, you can only reference jscharts_mb.js, or you can reference jscharts.js first, and then jscharts.plug.mb.js. You can choose one of the two methods.