JSChart能够在网页上生成图标,常用于统计信息,十分好用的一个JS组件。
使用JsChart
,
1。下载JScharts库从官网下载JScharts库,我们使用的是压缩包里面的jscharts.js文件。它大约150 kb。
使用JScharts库在网页文件(如html或. jsp)包含JScharts库。
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/js/jscharts.js "祝辞& lt;/script>
定义容器要在网页文件上显示JScharts生成的图像,需要把此图像放入网页容器。此网页容器我们通常用
标签来定义,而且必须强制性地为此DIV元素指定唯一的ID值。比如:
& lt; div id=" chartcontainer "在这里将用来显示图形报表& lt;/div>
注意:此DIV容器内的内容都会被JScharts图像所替代。
显示JScharts图像下面,我们需要写少量代码来显示一个线性图。首先要准备好图像所需的数据,我们可以用JavaScript数组来提供数据,数组中的每个元素都是由2个元素所组成
& lt;脚本type=" text/javascript祝辞
var myData=https://www.yisu.com/zixun/new数组(["商品1”,20],[“商品2”,10],[“商品3”,30],[“商品4”,10],
["商品5”,5]);
var myChart=new JSChart (“chartcontainer”,“线”);
myChart.setDataArray (myData);
myChart.draw ();
& lt;/script>
5。使用详细说明
& lt; body>
& lt; div id=" chartcontainer "在这里将用来显示图形报表& lt;/div>
& lt;脚本type=" text/javascript祝辞//支持js二维数组,json格式,xml格式数据源
var myData=https://www.yisu.com/zixun/new数组(["商品1”,20],[“商品2”,10],[“商品3”,30],[“商品4”,10],
["商品5”,5]);//第二个参数值有:线,酒吧,派分别表示用线形图,柱状图,饼图来展示报表
var myChart=new JSChart (“chartcontainer”,“线”);//数据源处理方式一:setDataArray (myData)使用js数组//myChart.setDataArray (myData);//数据源处理方式二:setDataJSON使用json格式数据//myChart.setDataJSON (“data.json”);//数据源处理方式三:setDataXML使用xml格式数据
myChart.setDataXML (“data.xml”);
myChart.setTitle(“测试报表”);
myChart.draw ();
& lt;/script>
& lt; !——var myChart=new JSChart (chart_container,美元(“#”).val (),”);
setAxisColor(字符串hexcolor)设置轴线颜色,对饼图无效。参数为16进制颜色值。
调整(整数x,整数y)重置图表大小,默认x/y为400 px/300 px,新值应是默认值的整数倍。
setAxisNameColor(字符串hexcolor)设置轴线名的颜色,对饼图无效。
setAxisNameFontSize(整数字形大小)设置轴线名字体大小,对饼图无效。默认是11。
setAxisNameX(字符串axisname)设置x轴的名称,对饼图无效。
setAxisNameY(字符串axisname)设置y轴的名称,对饼图无效。
setAxisPaddingBottom(整数填充)设置x轴和容器底部的距离,默认30。
setAxisPaddingLeft(整数填充)设置y轴和容器左边距的距离,默认40。
setAxisPaddingRight(整数填充)设置图表右边和容器的距离,默认30。
setAxisPaddingTop(整数填充)设置图表上边和容器的距离,默认30。
setAxisValuesColor(字符串hexcolor)设置x/y轴值刻度值的颜色,对饼图无效。
setAxisValuesDecimals(整数小数)设置曲线图的x/y轴值,或柱状图的y轴值,对饼图无效,默认是汽车。
setAxisValuesFontSize(整数字形大小)设置两轴上值的字体大小,对饼图无效。
setAxisValuesNumberX(整数)设置x轴上显示的值的个数,此值会自动调整,对饼图无效。
setAxisValuesNumberY(整数)设置x轴上显示的值的个数,此值会自动调整,对饼图无效。
setAxisWidth宽度(整数)设置轴的宽度,默认是2。
setBackgroundColor(字符串hexcolor)设置整个图表的背景颜色,默认是# FFF。
setBackgroundImage(字符串文件名)设置图表的背景图片,图片会自动沿两轴重复。
setBarBorderColor(字符串hexcolor)设置柱状图的条形边框颜色,只对柱状图有效,默认# C4C4C4。
setBarBorderWidth宽度(整数)设置柱状图边框宽度,只对柱状图有效。
setBarColor(字符串hexcolor)设置柱状图所有矩形的颜色,此函数被再着色()函数重写,只对柱状图有效。
setBarOpacity(浮动不透明度)设置柱状图的透明度,值在0 ~ 1之间,默认0.9。
setBarSpacingRatio(整数比)设置柱状图矩形间距,由此来控制柱状图的宽度,值为0 ~ 100之间的整数,默认是10。
setBarValues(布尔值)设置是否在矩形顶端显示值。
setBarValuesColor(字符串hexcolor)设置柱状图矩形的值的颜色。
setBarValuesDecimals(整数小数)设置柱状图矩形高度的值,值为十进制数,默认汽车。
setBarValuesFontSize(整数字形大小)设置柱状图矩形值的字体大,小默认8。
setCanvasIdPrefix(字符串前缀)自定义生产元素的ID前缀,默认是JSChart,此值一般不用修改。
setDataArray(数组数据,字符串id)将数据以数组的形式导入图,表id参数是可选的,并且可以设置相同的id。
setDataXML(字符串文件名)将数据以xml的形式导入到图表。
setFlagColor(字符串hexcolor)为提示标志设置颜色。
setFlagOffset(整数抵消)设置提示标志的偏移量,只适用于饼图。
setFlagOpacity(浮动不透明度)设置提示标志的透明度,0 ~ 1之间,默认0.5。
setFlagRadius(整数)半径设置提示标志的半径,默认3。
setFlagWidth宽度(整数)设置提示标志边框宽度,默认1。
setGraphExtend(布尔扩展)设置是否开启图表延伸功能,默认是假的,如果打开,双轴和网格线将扩展当前长度的1/15,这样可以在样式上更加美观。
setGraphLabel(字符串标签)设置自定义图表水印标签文字。
setGraphLabelColor(字符串hexcolor)设置自定义图表水印标签颜色。
setGraphLabelFontSize(整数字形大小)设置自定义图表水印标签的字体大,小默认8。
setGraphLabelOpacity(浮动不透明度)设置自定义图表水印标签的透明度。
setGraphLabelPosition(字符串位置)设置自定义图表水印标签的位置,取值范围在(西北,东北,西南,se),分别定位在四个角,默认ne,即右上角。
setGraphLabelShadowColor(字符串hexcolor)设置自定义图表水印标签的阴影颜色。
setGrid(布尔网格)设置是否显示网格线。
setGridColor(字符串hexcolor)设置网格线的颜色,默认# C6C6C6。
setGridOpacity(浮动不透明度)设置网格线透明度,取值在0 ~ 1之间,默认0.5。
setIntervalEndX(整数)设置x轴的结束值,如果设置了起始值,则此值必须比起始值大。
setIntervalEndY(整数)设置y轴的结束值,如果设置了起始值,则此值必须比起始值大。
setIntervalStartX(整数开始)设置x轴的起始值,如果设置了结束值,则此值必须比结束值小。
setIntervalStartY(整数开始)设置y轴的起始值,如果设置了结束值,则此值必须比结束值小。
setLabelX(数组标签)在x轴上添加标签,其参数是两个值构成的一个数组,第一个参数为标签在x轴上的位置,第二个值为标签显示的内容。
setLabelY数组(标签)在y轴上添加标签,其参数是两个值构成的一个数组,第一个参数为标签在y轴上的位置,第二个值为标签显示的内容。
hexcolor setLineColor(字符串,字符串id)设置曲线图中曲线的颜色。参见曲线图示例3。
setLineOpacity(浮不透明度,字符串id)设置曲线图中曲线的透明度,取值0 ~ 1之间,默认0.9。参数id的意义同上。
setLineWidth(整数宽度、字符串id)设置曲线图中曲线的宽度,默认2。
setPieOpacity(浮动不透明度)设置饼图的透明度,取值0 ~ 1,默认1。
setPiePosition(整数x,整数y)设置饼图在容器内的位置,默认0,即位于容器的中央。
setPieRadius(整数)半径设置饼图的半径。
setPieUnitsColor(字符串hexcolor)设置饼图块名的颜色。
setPieUnitsFontSize(整数字形大小)设置饼图块名的字体大小。
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
