SoFunction
Updated on 2025-04-10

Detailed explanation of JsChart component usage

What is JsChart?

JSChart can generate icons on web pages, which are often used for statistics, and are a very useful JS component.

Using JsChart

one. Import

 two. Write a test page

1. Download the JScharts library. Download the JScharts library from the official website. We use the files in the compressed package. It's about 150KB.

Use the JScharts library to include the JScharts library in web files such as .html or .jsp.

<script type="text/javascript" src="js/"></script>

Defining a container To display the image generated by JScharts on a web page file, you need to put this image into the web page container. We usually use this web container

Tags are defined, and a unique ID value must be mandatory for this DIV element. for example:

&lt;div &gt;This will be used to display the graphical report&lt;/div&gt;

Note: The contents in this DIV container will be replaced by JScharts images.

Showing JScharts Images Below, we need to write a small amount of code to display a linear graph. First, we need to prepare the data required for the image. We can use JavaScript array to provide the data. Each element in the array is composed of 2 elements.

&lt;script type="text/javascript"&gt;
 var myData = new Array([ "Product 1", 20 ], [ "Product 2", 10 ], [ "Product 3", 30 ], [ "Product 4", 10 ],
  [ "Product 5", 5 ]);
 var myChart = new JSChart('chartcontainer', 'line');
 (myData);
 ();
 &lt;/script&gt;

5. Detailed instructions for use

&lt;body&gt;
 &lt;div &gt;This will be used to display the graphical report&lt;/div&gt;
 &lt;script type="text/javascript"&gt;
 //Supports js two-dimensional array, json format, xml format data source var myData = new Array([ "Product 1", 20 ], [ "Product 2", 10 ], [ "Product 3", 30 ], [ "Product 4", 10 ],
  [ "Product 5", 5 ]);
  //The second parameter values ​​are: line, bar, and pie respectively represent the use of line charts, histograms, and pie charts to display the report. var myChart = new JSChart('chartcontainer', 'line');
 //Data source processing method 1: setDataArray(myData) uses js array //(myData);
 //Data source processing method 2: setDataJSON uses json format data //("");
 //Data source processing method three: setDataXML uses xml format data ("");
 
 ('Test Report');
 
 ();
 &lt;/script&gt;
 
&lt;!-- var myChart = new JSChart('chart_container', $("#type").val(),'');
   
setAxisColor(string hexcolor)Set the axis color，Invalid for pie chart。The parameters are16Category color value。
resize(integer x, integer y)Reset chart size，defaultx/yfor400px/300px，新值应是default值的整数倍.
setAxisNameColor(string hexcolor)Set the color of the axis name，Invalid for pie chart。
setAxisNameFontSize(integer fontsize)Set the axis name body size，Invalid for pie chart。default是11。
setAxisNameX(string axisname)set upxThe name of the axis，Invalid for pie chart。
setAxisNameY(string axisname)set upyThe name of the axis，Invalid for pie chart。
setAxisPaddingBottom(integer padding)set upxDistance between the shaft and the bottom of the container，default30。
setAxisPaddingLeft(integer padding)set upyThe distance between the axis and the left margin of the container，default40。
setAxisPaddingRight(integer padding)set up图表右边和容器的距离，default30。
setAxisPaddingTop(integer padding)set up图表上边和容器的距离，default30。
setAxisValuesColor(string hexcolor)set upx/yThe color of the axis value scale value，Invalid for pie chart。
setAxisValuesDecimals(integer decimals)set up曲线图的x/yAxis value，or histogramyAxis value，Invalid for pie chart，default是auto。
setAxisValuesFontSize(integer fontsize)set up两轴上值的字体大小，Invalid for pie chart。
setAxisValuesNumberX(integer number)set upxNumber of values ​​displayed on the axis，This value will be automatically adjusted，Invalid for pie chart。
setAxisValuesNumberY(integer number)set upxNumber of values ​​displayed on the axis，This value will be automatically adjusted，Invalid for pie chart。
setAxisWidth(integer width)set up轴的宽度，default是2。
setBackgroundColor(string hexcolor)set up整个图表的背景颜色，default是#FFF。
setBackgroundImage(string filename)set up图表的背景图片，The picture will be automatically repeated along two axes。
setBarBorderColor(string hexcolor)set up柱状图的条形边框颜色，Only valid for bar charts，default#C4C4C4。
setBarBorderWidth(integer width)set up柱状图边框宽度，Only valid for bar charts。
setBarColor(string hexcolor)set up柱状图所有矩形的颜色，This function iscolorize()Function rewrite，Only valid for bar charts。
setBarOpacity(float opacity)set up柱状图的透明度，Value in0～1between，default0.9。
setBarSpacingRatio(integer ratio)set up柱状图矩形间距，This controls the width of the bar chart，值for0～100between的整数，default是10。
setBarValues(boolean values)set up是否exist矩形顶端显示值。
setBarValuesColor(string hexcolor)set up柱状图矩形的值的颜色。
setBarValuesDecimals(integer decimals)set up柱状图矩形高度的值，值for十进制数，defaultauto。
setBarValuesFontSize(integer fontsize)set up柱状图矩形值的字体大小，default8.
 setCanvasIdPrefix(string prefix)Custom production elementsIDPrefix，default是JSChart，This value does not need to be modified generally。
setDataArray(array data, string id)Import data into charts as arrays，idParameters are optional，并且可以set up相同的id。
setDataXML(string filename)Put the data intoxmlImport the form to the chart。
setFlagColor(string hexcolor)for提示标志set up颜色。
setFlagOffset(integer offset)set up提示标志的偏移量，Applicable to pie charts only。
setFlagOpacity(float opacity)set up提示标志的透明度，0～1between，default0.5.
 setFlagRadius(integer radius)set up提示标志的半径，default3.
 setFlagWidth(integer width)set up提示标志边框宽度，default1.
 setGraphExtend(boolean extend)set up是否开启图表延伸功能，default是false，If open，The biaxial and grid lines will expand the current length of1/15，This makes it more beautiful in style.
setGraphLabel(string label)set up自定义图表水印标签文字。
setGraphLabelColor(string hexcolor)set up自定义图表水印标签颜色。
setGraphLabelFontSize(integer fontsize)set up自定义图表水印标签的字体大小，default8.
 setGraphLabelOpacity(float opacity)set up自定义图表水印标签的透明度。
setGraphLabelPosition(string position)set up自定义图表水印标签的位置，The value range is（nw, ne, sw ，se），Positioned in four corners，defaultne，That is, the upper right corner。
setGraphLabelShadowColor(string hexcolor)set up自定义图表水印标签的阴影颜色。
setGrid(boolean grid)set upWhether to display网格线。
setGridColor(string hexcolor)set up网格线的颜色，default#C6C6C6。
setGridOpacity(float opacity)set up网格线透明度，取Value in0～1between，default0.5。
setIntervalEndX(integer end)set upxThe end value of the axis，如果set up了起始值，Then this value must be larger than the starting value。
setIntervalEndY(integer end)set upyThe end value of the axis，如果set up了起始值，Then this value must be larger than the starting value。
setIntervalStartX(integer start)set upxThe starting value of the axis，如果set up了结束值，Then this value must be smaller than the end value。
setIntervalStartY(integer start)set upyThe starting value of the axis，如果set up了结束值，Then this value must be smaller than the end value。
setLabelX(array label)existxAdd labels to the axis，Its parameters are an array of two values，第一个The parameters are标签existxPosition on the axis，第二个值for标签显示的内容。
setLabelY(array label)existyAdd labels to the axis，Its parameters are an array of two values，第一个The parameters are标签existyPosition on the axis，第二个值for标签显示的内容。
setLineColor(string hexcolor, string id)set up曲线图中曲线的颜色。See example curve chart3.
 setLineOpacity(float opacity, string id)set up曲线图中曲线的透明度，Get the value0～1between，default0.9。parameteridThe same meaning as above。
setLineWidth(integer width, string id)set up曲线图中曲线的宽度，default2.
 setPieOpacity(float opacity)set up饼图的透明度，Get the value0～1，default1.
 setPiePosition(integer x, integer y)set up饼图exist容器内的位置，default0，That is, located in the center of the container.
setPieRadius(integer radius)set up饼图的半径。
setPieUnitsColor(string hexcolor)set up饼图块名的颜色。
setPieUnitsFontSize(integer fontsize)set up饼图块名的字体大小。
setPieUnitsOffset(integer offset)set up饼图块名的位置，Integer shift outward，Negative number shift inward。
setPieValuesColor(string hexcolor)set up饼图值的颜色。
setPieValuesDecimals(integer decimals)set up饼图上的总值。
setPieValuesFontSize(integer fontsize)set up饼图上值的字体大小。
setPieValuesOffset(integer offset)set up饼图上值的偏移，Integer shift outward，Negative number shift inward，default-20。
setShowXValues(boolean show)Whether to displayxScale value on the axis。
setShowYValues(boolean show)Whether to displayyScale value on the axis。
setSize(integer x, integer y)Predefined container size，需用existdraw()Before the function。
setTextPaddingBottom(integer padding)set upxThe distance between the label text on the axis and the bottom of the container，default1.
 setTextPaddingLeft(integer padding)set upyThe distance between the label text on the axis and the left side of the container，default8.
 setTextPaddingTop(integer padding)set up图表顶端与容器上边的距离，default15.
 setTitle(string title)set up图表标题，default“JSChart”。
setTitleColor(string hexcolor)set up标题颜色。
setTitleFontSize(integer fontsize)set up标题字体大小。
setTitlePosition(string position)set up标题位置，Get the value范围（center, left ， right.）。
setTooltip(array tooltip)set upxTips on the axis。
setTooltipBackground(string hexcolor)set up提示背景。
setTooltipBorder(string css)set up提示背景边框风格，parameter是cssexpression，default是 1px solid #d3d3d3。
setTooltipFontColor(string hexcolor)set up提示内容颜色。
setTooltipFontFamily(string font)set up提示字体风格，defaultarial.
 setTooltipFontSize(integer fontsize)set up提示内容字体大小，default12.
 setTooltipOffset(integer offset)set up提示内容偏移，default7。
setTooltipOpacity(float opacity)set up提示透明度，default0.7.
 setTooltipPadding(string css)set up提示paddingstyle，default 2px 5px。
setTooltipPosition(string position)set up提示位置,Get the value范围 nw, ne, sw and se defaultse。
setLegendShow(boolean show)set upWhether to display图例
    --&gt;
&lt;/body&gt;
Statistics the purchase amount from each supplier during the specified time period
use
action:
@Resource
 private AccountRecordsService accountRecordsService;
 @RequestMapping("/selectSupplier")
 @ResponseBody
 public Object selectSupplier(String start,String end){
 ("start:"+ start+"||end:"+end);
 Map&lt;String, String&gt; paramMap =new HashMap&lt;String, String&gt;();
 ("start", start);
 ("end", end);
 return (paramMap);
 }
public interface AccountRecordsService extends BaseService&lt;AccountRecords&gt; {
 List&lt;Map&lt;String, Object&gt;&gt; selectSupplier(Map&lt;String,String&gt; paramMap);
}
@Service("accountRecordsService")
public class AccountRecordsServiceImpl extends BaseServiceImpl&lt;AccountRecords&gt;
 implements AccountRecordsService {
 @Override
 public List&lt;Map&lt;String, Object&gt;&gt; selectSupplier(Map&lt;String, String&gt; paramMap) {
 // TODO Auto-generated method stub
 return (paramMap);
 }
}
public interface AccountRecordsMapper extends BaseMapper&lt;AccountRecords&gt; {
 
 List&lt;Map&lt;String, Object&gt;&gt; selectSupplier(Map&lt;String, String&gt; paramMap);
}
 &lt;select  parameterType="map" resultType="map"&gt;
  &lt;![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 &gt;#{start} and ar_date&lt;=#{end} and ar_bus_type='bo' 
  group by sup_name  
  ]]&gt;
 &lt;/select&gt;
select sum(ar_payable) total,sup_name from account_records inner join supplier on account_records.sup_id=supplie

Summarize

The above is a detailed explanation of the use of JsChart components introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message. The editor will reply to everyone in time!