Jscharts 的属性和方法

1. 实例化 JSCharts

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

注：chartId-<div>标签的id、bar-图的类型 如（饼图、线图 等。。。）。

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文件。

如：

   <?xmlversion="1.0"?>

<JSChart>

<datasettype="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>

<datasettype="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.setSize（500,300）；注：宽度500,、高度：300

7.自定义图表标题

       myChart.setTitle（“我的图表标题”）;

8.自定义标题样色

myChart.setTitleColor(“#FF0000”);

9.自定义标题字体大小

       myChart.setTitleFontSize(12 );

10.折线图属性

     myChart.setDataArray（myData2，“second line”）; 注：第二条线的数据

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

myChart.setLineWidth（5，“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 X轴Name'"/>
<option set="setAxisNameY" value="'Y Axis'"/>
<option set="setSize" value="500,400"/>
<option set="setTitle" value="'My图Title'"/>
<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 X轴Name'"/>
<option set="setAxisNameY" value="'Y Axis'"/>
<option set="setLineColor" value="'#ff0f0f','firstline'"/>
<option set="setLineWidth" value="5,'second line'"/>
<option set="setSize" value="500,400"/>
<option set="setTitle" value="'My图Title'"/>
<option set="setTitleColor" value="'#5555AA'"/>
<option set="setTitleFontSize" value="10"/>
<option set="setTooltip" value="[15,'My Tooltip','firstline']"/>
</ optionset>

</JSChart>

 

  

12. 自定义的颜色

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

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

myChart.colorizePie（myColors）；注：饼图的颜色

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)  注：设置颜色为X和Y轴的值。

setAxisValuesDecimals(integer decimals)注：设置线图X和Y轴的值的小数数

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

setAxisValuesNumberX(integer number)注:设置Y轴的数量0和1作为值显示

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