关闭

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

标签: jschartjs图标
643人阅读 评论(0) 收藏 举报
分类:

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)  提示标志设置的工具提示的位置。




0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:632464次
    • 积分:10384
    • 等级:
    • 排名:第1791名
    • 原创:365篇
    • 转载:432篇
    • 译文:7篇
    • 评论:47条
    最新评论