< FusionChart最新版本下載>
配置垂直分割線的位置
你可以配置垂直分隔線的顯示位置。垂直分隔線顯示在Friday和Saturday數據點數據點之間的折線圖如下圖所示：
下表是配置垂直分隔線顯示位置所需的屬性：
| 屬性名稱 |
描述 |
| linePosition |
用來指定垂直分隔線的相對位置，取值從0到1。如果垂直分隔線被繪制在兩個數據點之間，那么第一個數據點就是0，第二個數據點就是1。默認情況下，取值為0.5時垂直分隔線顯示在兩個數據點之間。 |
| vLine |
設置為1時顯示垂直分隔線；設置為0時隱藏垂直分隔線。 |
上圖所示的配置垂直分隔線的數據結構如下：
JSON:
{
"chart": {
"theme": "fint",
"caption": "Visitors to website",
"subCaption": "Last week",
"xAxisName": "Day",
"yAxisName": "Visits",
"showValues": "0"
},
"data": [
{
"label": "Mon",
"value": "5123"
},
{
"label": "Tue",
"value": "4233"
},
{
"label": "Wed",
"value": "5507"
},
{
"label": "Thu",
"value": "4110"
},
{
"label": "Fri",
"value": "5529"
},
{
"vline": "true",
"label": "Weekend Start",
"linePosition": "0.7"
},
{
"label": "Sat",
"value": "5803"
},
{
"label": "Sun",
"value": "6202"
}
]
}
XML:
<chart theme="fint" caption="Visitors to website" subcaption="Last week" xaxisname="Day" yaxisname="Visits" showvalues="0">
< set label="Mon" value="5123" />
< set label="Tue" value="4233" />
< set label="Wed" value="5507" />
< set label="Thu" value="4110" />
< set label="Fri" value="5529" />
< vline label="Weekend Start" lineposition="0.7" />
< set label="Sat" value="5803" />
< set label="Sun" value="6202" />
</chart>
配置垂直分隔線標簽
創建標簽
垂直分隔線具有標簽的折線圖如下圖所示：
下表是創建垂直分隔線標簽所需的屬性：
| 屬性名稱 |
描述 |
| label |
用于指定特定垂直分割線的標題。 |
給垂直分隔線添加標簽的數據結構如下：
JSON:
{
"chart": {
"theme": "fint",
"caption": "Visitors to website",
"subCaption": "Last week",
"xAxisName": "Day",
"yAxisName": "Visits",
"showValues": "0"
},
"data": [
{
"label": "Mon",
"value": "5123"
},
{
"label": "Tue",
"value": "4233"
},
{
"label": "Wed",
"value": "5507"
},
{
"label": "Thu",
"value": "4110"
},
{
"label": "Fri",
"value": "5529"
},
{
"vline": "true",
"label": "Weekend",
"linePosition": "1",
"labelPosition": "0.5"
},
{
"label": "Sat",
"value": "5803"
},
{
"label": "Sun",
"value": "6202"
}
]
}
XML:
<chart theme="fint" caption="Visitors to website" subcaption="Last week" xaxisname="Day" yaxisname="Visits" showvalues="0">
< set label="Mon" value="5123" />
< set label="Tue" value="4233" />
< set label="Wed" value="5507" />
< set label="Thu" value="4110" />
< set label="Fri" value="5529" />
< vline label="Weekend" lineposition="1" labelposition="0.5" />
< set label="Sat" value="5803" />
< set label="Sun" value="6202" />
</chart>
配置標簽位置
將標簽的位置設置為顯示在垂直分隔線的中間位置，效果圖如下：
下表是設置垂直分隔線標簽位置所需的屬性：
| 屬性名稱 |
描述 |
| labelPosition |
用于指定垂直分隔線標簽的相對位置，取值從0到1。在垂直圖表中，取值為0時顯示在畫布的頂部，為1時顯示在畫布的底部。在水平圖表中。取值為0時顯示在畫布的左邊，為1時顯示在畫布的右邊。 |
上圖所示配置垂直分隔線標簽位置的數據結構如下：
JSON:
{
"chart": {
"theme": "fint",
"caption": "Visitors to website",
"subCaption": "Last week",
"xAxisName": "Day",
"yAxisName": "Visits",
"showValues": "0"
},
"data": [
{
"label": "Mon",
"value": "5123"
},
{
"label": "Tue",
"value": "4233"
},
{
"label": "Wed",
"value": "5507"
},
{
"label": "Thu",
"value": "4110"
},
{
"label": "Fri",
"value": "5529"
},
{
"vline": "true",
"label": "Weekend",
"linePosition": "1",
"labelPosition": "0.5"
},
{
"label": "Sat",
"value": "5803"
},
{
"label": "Sun",
"value": "6202"
}
]
}
XML:
<chart theme="fint" caption="Visitors to website" subcaption="Last week" xaxisname="Day" yaxisname="Visits" showvalues="0">
< set label="Mon" value="5123" />
< set label="Tue" value="4233" />
< set label="Wed" value="5507" />
< set label="Thu" value="4110" />
< set label="Fri" value="5529" />
< vline label="Weekend" lineposition="1" labelposition="0.5" />
< set label="Sat" value="5803" />
< set label="Sun" value="6202" />
</chart>
配置標簽的對齊方式
自定義垂直分隔線標簽對齊方式的效果圖如下：
第一張圖表中的垂直分隔線標簽與頂部垂直對齊并且與左邊水平對齊。第二張圖表中的垂直分隔線與底部垂直對齊并且與右邊水平對齊。
下表是設置垂直分隔線標簽對齊方式所需的屬性：
| 屬性名稱 |
描述 |
| labelHAlign |
用于指定垂直分隔線標簽的水平錨點。該屬性的取值有left、center(默認)和right。 |
| labelVAlign |
用于指定垂直分隔線標簽的垂直錨點。該屬性的取值有top、middle(默認)和bottom。 |
配置標簽對齊方式的數據結構如下：
圖一：
JSON:
{
"chart": {
"theme": "fint",
"caption": "Visitors to website",
"subCaption": "Last week",
"xAxisName": "Day",
"yAxisName": "Visits",
"showValues": "0"
},
"data": [
{
"label": "Mon",
"value": "5123"
},
{
"label": "Tue",
"value": "4233"
},
{
"label": "Wed",
"value": "5507"
},
{
"label": "Thu",
"value": "4110"
},
{
"label": "Fri",
"value": "5529"
},
{
"vline": "true",
"linePosition": "0",
"label": "Weekdays",
"labelPosition": "0",
"color": "#6da81e",
"thickness": "1",
"alpha": "50",
"labelVAlign": "middle",
"labelHAlign": "right"
},
{
"label": "Sat",
"value": "5803"
},
{
"label": "Sun",
"value": "6202"
}
]
}
XML:
<chart theme="fint" caption="Visitors to website" subcaption="Last week" xaxisname="Day" yaxisname="Visits" showvalues="0">
< set label="Mon" value="5123" />
< set label="Tue" value="4233" />
< set label="Wed" value="5507" />
< set label="Thu" value="4110" />
< set label="Fri" value="5529" />
< vline lineposition="0" label="Weekdays" labelposition="0" color="#6da81e" thickness="1" alpha="50" labelvalign="middle" labelhalign="right" />
< set label="Sat" value="5803" />
< set label="Sun" value="6202" />
</chart>
圖二：
JSON:
{
"chart": {
"theme": "fint",
"chartRightMargin": "40",
"caption": "Visitors to website",
"subCaption": "Last week",
"xAxisName": "Day",
"yAxisName": "Visits",
"showValues": "0"
},
"data": [
{
"label": "Mon",
"value": "5123"
},
{
"label": "Tue",
"value": "4233"
},
{
"label": "Wed",
"value": "5507"
},
{
"label": "Thu",
"value": "4110"
},
{
"label": "Fri",
"value": "5529"
},
{
"vline": "true",
"linePosition": "1",
"label": "Weekend",
"labelPosition": "0.95",
"color": "#6da81e",
"thickness": "1",
"alpha": "50",
"labelVAlign": "middle",
"labelHAlign": "left"
},
{
"label": "Sat",
"value": "5803"
},
{
"label": "Sun",
"value": "6202"
}
]
}
XML:
<chart theme="fint" chartrightmargin="40" caption="Visitors to website" subcaption="Last week" xaxisname="Day" yaxisname="Visits" showvalues="0">
< set label="Mon" value="5123" />
< set label="Tue" value="4233" />
< set label="Wed" value="5507" />
< set label="Thu" value="4110" />
< set label="Fri" value="5529" />
< vline lineposition="1" label="Weekend" labelposition="0.95" color="#6da81e" thickness="1" alpha="50" labelvalign="middle" labelhalign="left" />
< set label="Sat" value="5803" />
< set label="Sun" value="6202" />
</chart>
自定義垂直分隔線的顯示屬性
自定義垂直分隔線為虛線的效果圖如下：
下表是自定義垂直分隔線外觀所需的屬性：
| 屬性名稱 |
描述 |
| color |
用于指定垂直分割線的渲染顏色，用十六進制代碼。 |
| thickness |
設置垂直分隔線的厚度（用像素）。 |
| alpha |
設置垂直分隔線的透明度，取值從0到100。 |
| dashed |
設置為1時垂直分隔線呈虛線，設置為0（默認）時為實線。 |
| dashLen |
設置垂直分隔線虛線段的長度（用像素）。 |
| dashGap |
設置垂直分隔線虛線段間的間隙（用像素）。 |
上圖所示圖表的自定義垂直分隔線數據結構如下：
JSON:
{
"chart": {
"theme": "fint",
"caption": "Visitors to website",
"subCaption": "Last week",
"xAxisName": "Day",
"yAxisName": "Visits",
"showValues": "0"
},
"data": [
{
"label": "Mon",
"value": "5123"
},
{
"label": "Tue",
"value": "4233"
},
{
"label": "Wed",
"value": "5507"
},
{
"label": "Thu",
"value": "4110"
},
{
"label": "Fri",
"value": "5529"
},
{
"vline": "true",
"linePosition": "1",
"label": "Weekend",
"labelPosition": "0.5",
"color": "#6da81e",
"thickness": "2",
"alpha": "50",
"dashed": "1",
"dashLen": "4",
"dashGap": "2"
},
{
"label": "Sat",
"value": "5803"
},
{
"label": "Sun",
"value": "6202"
}
]
}
XML:
<chart theme="fint" caption="Visitors to website" subcaption="Last week" xaxisname="Day" yaxisname="Visits" showvalues="0">
< set label="Mon" value="5123" />
< set label="Tue" value="4233" />
< set label="Wed" value="5507" />
< set label="Thu" value="4110" />
< set label="Fri" value="5529" />
< vline lineposition="1" label="Weekend" labelposition="0.5" color="#6da81e" thickness="2" alpha="50" dashed="1" dashlen="4" dashgap="2" />
< set label="Sat" value="5803" />
< set label="Sun" value="6202" />
</chart>
配置垂直分隔線標簽邊框
垂直分隔線標簽不帶邊框效果圖如下：
下表是設置垂直分隔線標簽邊框所需的屬性：
| 屬性名稱 |
描述 |
| showVLineLabelBorder |
用于指定是否顯示所有垂直分割線的標簽邊框。該屬性可在圖表的對象級進行設置。 |
| showLabelBorder |
用于指定某個具體的垂直分割線的標簽邊框。可覆蓋圖表對象的設置。 |
上圖所示的配置垂直分隔線標簽邊框的數據結構如下：
JSON:
{
"chart": {
"theme": "fint",
"caption": "Visitors to website",
"subCaption": "Last week",
"xAxisName": "Day",
"yAxisName": "Visits",
"showValues": "0",
"showVLineLabelBorder": "0"
},
"data": [
{
"label": "Mon",
"value": "5123"
},
{
"label": "Tue",
"value": "4233"
},
{
"label": "Wed",
"value": "5507"
},
{
"label": "Thu",
"value": "4110"
},
{
"label": "Fri",
"value": "5529"
},
{
"vline": "true",
"linePosition": "1",
"label": "Weekend",
"labelPosition": "0",
"labelHAlign": "left",
"labelVAlign": "top",
"color": "#6da81e",
"alpha": "50",
"showLabelBorder": "0"
},
{
"label": "Sat",
"value": "5803"
},
{
"label": "Sun",
"value": "6202"
}
]
}
XML:
<chart theme="fint" caption="Visitors to website" subcaption="Last week" xaxisname="Day" yaxisname="Visits" showvalues="0" showvlinelabelborder="0">
< set label="Mon" value="5123" />
< set label="Tue" value="4233" />
< set label="Wed" value="5507" />
< set label="Thu" value="4110" />
< set label="Fri" value="5529" />
< vline lineposition="1" label="Weekend" labelposition="0" labelhalign="left" labelvalign="top" color="#6da81e" alpha="50" showlabelborder="0" />
< set label="Sat" value="5803" />
< set label="Sun" value="6202" />
</chart>
購買最新正版授權！詳情請""
標簽：
JavaScript HTML5圖表圖表庫數據可視化圖表解決方案圖表控件FusionCharts圖表
本站文章除注明轉載外，均為本站原創或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn
半島外圍網上直營 
11次
相關產品
正式授權
最新文章 
半島外圍網上直營相關的文章 
微信
在線咨詢
渝公網安備
50010702500608號
客服熱線