轻量级图形报表工具JSCharts (JSChart),内置函数中文参考(二)

转载 2016年05月31日 16:10:09

1. 实例化 JSCharts

var mycharts=new JSCharts(“ chartId”,”bar ” );

注:chartId-<div>标签的idbar-图的类型 如(饼图、线图 等。。。)。

2.JSCharts 设置数据。

 var myData = new Array([10, 20], [15, 10], [20, 30], [25, 10], [30, 5]);

mycharts.setDataArray(myData);  注:myData json 数据。

mycharts.setDataXML(”data.xml”)   注:data.xml xml文件。

如:

   <?xml version="1.0"?>

<JSChart>

<dataset type="line">

<data unit="10" value="20"/>

<data unit="15" value="10"/>

<data unit="20" value="30"/>

<data unit="25" value="10"/>

<data unit="30" value="5"/>

</dataset>

<dataset type="line">

<data unit="10" value="10"/>

<data unit="15" value="5"/>

<data unit="25" value="25"/>

<data unit="30" value="20"/>

</dataset>

</JSChart>

3. 设置背景颜色

   myChart.setBackgroundColor(“#FF0000”);

4. 自定义Y轴名称

   myChart.setAxisNameX(办件量)

5. 自定义X轴名称

    myChart.setAxisNameY(“月份”);
6. 自定义图表大小

myChart.setSize500,300);注:宽度500,、高度:300

7.自定义图表标题

myChart.setTitle(“我的图表标题”);

8.自定义标题样色

myChart.setTitleColor(#FF0000);

9.自定义标题字体大小

myChart.setTitleFontSize( 12 );

10.折线图属性

myChart.setDataArraymyData2,“second line”); 注:第二条线的数据

myChart.setLineColor('#ff0f0f', 'first line'); 注:第一条线的颜色

myChart.setLineWidth5,“second line”)注:第二条线的宽度。

myChart.setTooltip[15,“我的工具提示”,“second line];?????
11. 使用optionset

optionset是一个特殊的节点,它可以插入XML文件中所使用的数据导入到
图表。

<JSChart>

<dataset>

     ……….

</dataset>

 

<optionset>
<option set="setBackgroundColor" value="'#efe'"/>
<option set="setAxisNameX" value="'Custom XName'"/>
<option set="setAxisNameY" value="'Y Axis'"/>
<option set="setSize" value="500,400"/>
<option set="setTitle" value="'MyTitle'"/>
<option set="setTitleColor" value="'#5555AA'"/>
<option set="setTitleFontSize" value="10"/>

</ optionset>

</JSChart>

11 - 在一个XML文件中的示例使用optionset

<option>标签有两个强制性的属性。第一个属性是设置,实际上是通常
JavaScript函数的名称。第二个属性是价值和代表的确切参数
将使用功能,包括任何逗号或引号(总是使用单引号内
值,因为双引号会改变XML语法)。
当使用多个数据集线图表和不同的定制需要不同的
线,数据集必须接受必须在第二个参数使用id属性
在下面的例子中所述的选项:

<XML版本=1.0”?>
<JSChart>
<dataset type="line" id="first line">
<data unit="10" value="20"/>
<data unit="15" value="10"/>
<data unit="20" value="30"/>
<data unit="25" value="10"/>
<data unit="30" value="5"/>
</dataset>


<dataset type="line" id="second line">
<data unit="10" value="10"/>
<data unit="15" value="5"/>
<data unit="25" value="25"/>
<data unit="30" value="20"/>

</dataset>

 

<optionset>
<option set="setBackgroundColor" value="'#efe'"/>
<option set="setAxisNameX" value="'Custom XName'"/>
<option set="setAxisNameY" value="'Y Axis'"/>
<option set="setLineColor" value="'#ff0f0f','first line'"/>
<option set="setLineWidth" value="5,'second line'"/>
<option set="setSize" value="500,400"/>
<option set="setTitle" value="'MyTitle'"/>
<option set="setTitleColor" value="'#5555AA'"/>
<option set="setTitleFontSize" value="10"/>
<option set="setTooltip" value="[15,'My Tooltip','first line']"/>
</ optionset>

</JSChart>

 

 

 

 

 

12. 自定义的颜色

var myColors = new Array('#0f0', '#ff0000', '#00f', '#ff0', '#00ffff');

myChart.colorizeBars(myColors); 注:柱子的颜色

myChart.colorizePiemyColors);注:饼图的颜色

xml版本

<colorset>
<color value="#0f0"/>
<color value="#ff0000"/>
<color value="#00f"/>
<color value="#ff0"/>
<color value="#00ffff"/>
</ colorset>

13.图表函数
colorizePie(array colordata);     注:colordata-颜色数组。   饼图

colorizeBars(array colordata)      注:colordata-颜色数组。   柱状图

draw()                        注:画图。

resize(integer x, integer y)         图表宽度、高度。

setAxisColor(string hexcolor)  注:设置两个轴的颜色。

setAxisNameColor(string hexcolor) 注:设置为两轴名称的颜色。如#ff0000

setAxisNameFontSize(integer fontsize) 注:设置为两轴名称设置字体大小。

setAxisNameX(string axisname)     注:设置X轴的名称

setAxisNameY(string axisname)     注:设置Y轴的名称

setAxisPaddingBottom(integer padding) 注:设置X轴与底部边框的距离。

setAxisPaddingLeft(integer padding)   注:设置Y轴与左边边框的距离

setAxisPaddingRight(integer padding)  注:设置右填充与右边边边框的距离

setAxisPaddingTop(integer padding)  注:设置上填充与上边边边框的距离

setAxisValuesColor(string hexcolor)  注:设置颜色为XY轴的值。

setAxisValuesDecimals(integer decimals)注:设置线图XY轴的值的小数数

setAxisValuesFontSize(integer fontsize) 注:设置两轴字体大小的值

setAxisValuesNumberX(integer number):设置Y轴的数量01作为值显示

setAxisValuesNumberY(integer number) 注:设置X轴的数量。同上↑

setAxisValuesPrefixX(string prefix)     注:给X轴的值添加前缀。

setAxisValuesPrefixY(string prefix)     注:给Y轴的值添加前缀。

setAxisValuesSuffixX(string suffix)     注:给X轴的值添加后缀。

setAxisValuesSuffixY(string suffix)     注:给Y轴的值添加后缀。

setAxisWidth(integer width)           注:设置两轴的宽度。

setBackgroundColor(string hexcolor)    注:设置整个图表的背景颜色

setBackgroundImage(string filename)    注:设置整个图表的背景图像

setBarBorderColor(string hexcolor)      注:设置柱状图 柱子的边框颜色

setBarBorderWidth(integer width)       注: 设置柱状图 柱子边框宽度。

setBarColor(string hexcolor)            注:设置柱状图 柱子的颜色。

setBarOpacity(float opacity)            注:设置柱子的透明度。

setBarSpacingRatio(integer ratio)        注:两个柱子之间的距离(1-100

setBarValues(boolean values)           注:柱子上面是否显示值。

setBarValuesColor(string hexcolor)       注:柱子上面值的颜色。

setBarValuesDecimals(integer decimals)   注:柱子上值的小数数量。

setBarValuesFontSize(integer fontsize)    注:柱子上值的字体大小。

setBarValuesPrefix(string prefix)         注:柱子上值添加的前缀。

setBarValuesSuffix(string suffix)         注:柱子上值添加的后缀。

setCanvasIdPrefix(string prefix)  注:自定义连接到生成的<canvas> ID的前缀

setFlagColor(string hexcolor)       注:设置工具提示标志的颜色。

setFlagOffset(integer offset)        注:饼图偏移,设置提示标志。

setFlagOpacity(float opacity)       注:设置工具提示标志的透明度。

setFlagRadius(integer radius)       注:设置工具提示标志半径

setFlagWidth(integer width)        注:设置提示标志边框的宽度

setGraphExtend(boolean extend)    注:切换图形扩展选项。为真时,图形的轴和网格线将延长长度等于轴长度15

setGraphLabel(string label)     注:设置自定义图形标记(水印)的字符串。

setGraphLabelColor(string hexcolor)  注:设置为自定义图表标签的颜色。

setGraphLabelFontSize(integer fontsize):设置为自定义图表标签的字体大小

setGraphLabelOpacity(float opacity)   注:设置为自定义图表标签的透明度

setGraphLabelPosition(string position)  注:设置自定义的图表标签的位置。

setGraphLabelShadowColor(string hexcolor)注:设置为自定义图表标签阴影颜色。

setGrid(boolean grid)         注:此设置为真或假无论是表演或图表背后的网格。  

setGridColor(string hexcolor)   注:设置网格颜色

setGridOpacity(float opacity)   注:设置网格透明度。

setIntervalEndX(integer end)   注:用来只显示与援助轴间隔设置图的一个片段。

setIntervalEndY(integer end)   注:用来只显示与援助轴间隔设置图的一个片段。

setIntervalStartX(integer start)  注:用来只显示与援助轴间隔设置图的一个片段。

setIntervalStartY(integer start)  注:用来只显示与援助轴间隔设置图的一个片段。

setLabelX(array label)  注:定义X轴的标签。参数是一个两个元素的数组

setLabelY(array label)  注:定义Y轴的标签。参数是一个两个元素的数组

setLineColor(string hexcolor, string id)    注:设置线颜色,和第几天线

setLineOpacity(float opacity, string id)    注:设置线的透明度。

setLineWidth(integer width, string id)注:设置线的宽度。

setPieOpacity(float opacity)注:设置饼图饼图的透明度

setPiePosition(integer x, integer y)      设置内<canvas>的馅饼位置。

setPieRadius(integer radius)            注:设置馅饼半径。

setPieUnitsColor(string hexcolor)        注:设置馅饼单位文本的颜色。

setPieUnitsFontSize(integer fontsize)     注:设置馅饼单位文本的字体大小。

setPieUnitsOffset(integer offset)         注:设置馅饼单位文本与饼的距离

setPieValuesColor(string hexcolor)注:设置馅饼的值的颜色。

setPieValuesDecimals(integer decimals)   注:设置馅饼的值的小数位数。

setPieValuesFontSize(integer fontsize)注:设置馅饼的值的字体大小

setPieValuesOffset(integer offset)        注:设置馅饼的值与饼的距离。

setPieValuesPrefix(string prefix)         注:设置馅饼的值文本的前缀。

setPieValuesSuffix(string suffix)注:设置馅饼的值文本的后缀。

setShowXValues(boolean show)         注:设置馅饼单位文本是否可见

setShowYValues(boolean show)注:设置馅饼的值是否可见

setSize(integer x, integer y)             设置整个图表的大小。

setTooltip(array tooltip, function callback)  注:定义一个提示。

setTooltipBackground(string hexcolor)     注:设置工具提示的背景颜色。

setTooltipBorder(string css) 注:设置工具提示边框样色

setTooltipFontColor(string hexcolor) 注:设置工具提示的内容颜色。

setTooltipFontFamily(string font) 注:设置工具提示的字体类型。

setTooltipFontSize(integer fontsize)  注:设置工具提示内容的字体大小。

setTooltipOffset(integer offset)  工具提示与本身的距离

setTooltipOpacity(float opacity)  设置工具提示的不透明度。

setTooltipPadding(string css) 设置工具提示填充样试。

setTooltipPosition(string position)  提示标志设置的工具提示的位置。




举报

相关文章推荐

轻量级图形报表工具JSCharts (JSChart),内置函数中文参考(二)

1. 实例化 JSCharts var mycharts=new JSCharts(“ chartId”,”bar ” ); 注:chartId-标签的id、bar-图的类型 如(饼图、线图...

轻量级图形报表工具JSCharts (JSChart),内置函数中文参考

JSChart是一个轻量级的在线图表生成工具,本身十分小巧,简单易用,相对来讲功能也不是特别强大,但是对于一些要求不高的应用来讲已经够用了。   这个框架本身对中文支持不是很好,手册什么的都是英文的...

精选:深入理解 Docker 内部原理及网络配置

网络绝对是任何系统的核心,对于容器而言也是如此。Docker 作为目前最火的轻量级容器技术,有很多令人称道的功能,如 Docker 的镜像管理。然而,Docker的网络一直以来都比较薄弱,所以我们有必要深入了解Docker的网络知识,以满足更高的网络需求。

轻量级图形报表工具JSCharts (JSChart),内置函数中文参考及中文解决方案

JSChart是一个轻量级的在线图表生成工具,本身十分小巧,简单易用,相对来讲功能也不是特别强大,但是对于一些要求不高的应用来讲已经够用了。   这个框架本身对中文支持不是很好,手册什么的都是英...

JSChart轻量级图形报表工具

JSChart是一个轻量级的在线图表生成工具,本身十分小巧,简单易用,相对来讲功能也不是特别强大,但是对于一些要求不高的应用来讲已经够用了,最近两天在做一个监控系统,想到了它。 ...

轻量级ETL工具

ETL是各类数据分析的前奏,是数据仓库中很重要的一个环节。它的全称是Extraction-Transformation-Loading,很明显,它的处理过程主要分为三步:数据提取、转换和加载。ETL所...

超轻量级数据库工具XDBHelper

超轻量级数据库工具XDBHelperXDBHelper是一款超轻量级数据库查询分析器支持CURD语句,可以批量执行SQL,支持SQLServer,Oracle,Sybase,Access等数据库。单击...

参考: 40个轻量级 JavaScript 库

参考: 40个轻量级 JavaScript 库 流行的 JavaScript 库不胜枚举,jQuery, MooTools, Prototype, Dojo, YUI。这些 JavaScri...

Web报表页面如何传递中文参数

在用报表开发工具FineReport设计的web报表中,给iframe设置src嵌入某个报表时,往往会给报表传递初始的参数值,若参数名称、参数值甚至报表名称中包含中文或者特殊字符时,如果不进行编码转换...

OrmLite 轻量级ORM框架工具

前言 在项目中用到了sqlite这个的数据库。第一想法就是找个ORM框架进行操作,找到了OrmLite这个轻量级框架。 使用一下,感觉非常方便,就在此记录此框架。 整合到项目 普通项目 下载jar 放...

轻量级队列工具Httpsqs

Httpsqs HTTPSQS(HTTP Simple Queue Service)是一款基于 HTTP GET/POST 协议的轻量级开源简单消息队列服务,使用 Tokyo Cabinet...
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)