JavaScript圖表工具FusionCharts入門教程(44)：如何縮放折線圖
FusionCharts Suite XT是全面的跨平臺、跨瀏覽器JavaScript圖表套包，其中包括FusionCharts XT、PowerCharts XT 、FusionWidgets XT、FusionMaps XT。支持 ASP、 ASP.NET、 PHP、 JSP、 ColdFusion、 Ruby on Rails、 JavaScript、甚至簡單的HTML頁面。它是你值得信賴的JavaScript圖表解決方案，目前在全球有45萬用戶選擇Fusioncharts來制作專業(yè)的JavaScript圖表。
創(chuàng)建縮放折線圖
例如，我們將創(chuàng)建一個(gè)縮放折線圖，以繪制去年每一天對harrysfoodmart.com和harrysfashion.com網(wǎng)站的唯一網(wǎng)站訪問次數(shù)。
要?jiǎng)?chuàng)建縮放折線圖，請執(zhí)行以下步驟：
- 在JSON數(shù)據(jù)中，以"<attributeName>": "<value>"格式設(shè)置屬性及其對應(yīng)的值。
- 使用type屬性指定圖表類型。要渲染縮放折線圖，請?jiān)O(shè)置zoomline。
- 使用renderAt屬性設(shè)置容器對象。
- 使用width和height屬性指定圖表的尺寸。
- 使用dataFormat屬性設(shè)置要傳遞給圖表對象的數(shù)據(jù)類型（JSON / XML）。
- 將compactDataMode屬性設(shè)置為，1以指定JSON數(shù)據(jù)為緊湊格式。
- 設(shè)置pixelsPerPoint屬性以指定將用于渲染數(shù)據(jù)點(diǎn)的像素?cái)?shù)。更大數(shù)量的像素將導(dǎo)致更高質(zhì)量的顯示。此屬性還用于設(shè)置連續(xù)數(shù)據(jù)圖之間的距離。
- 設(shè)置pixelsPerLabel屬性以指定將用于呈現(xiàn)數(shù)據(jù)標(biāo)簽的像素?cái)?shù)。
- 使用lineThickness屬性在char上指定線條的粗細(xì)。
這樣創(chuàng)建的縮放折線圖如下所示：
如上圖所示，在渲染時(shí)，縮放折線圖顯示了數(shù)據(jù)的宏觀視圖。數(shù)據(jù)經(jīng)過整齊的壓縮，因此所有數(shù)據(jù)都適合圖表的寬度。當(dāng)用戶通過在畫布上拖動鼠標(biāo)光標(biāo)選擇折線圖的一部分時(shí)，所選部分將展開以占據(jù)圖表的整個(gè)寬度。
此時(shí)，滾動條開始起作用，允許用戶查看在選定數(shù)據(jù)部分之前或之后的數(shù)據(jù)。為了更詳細(xì)地分析數(shù)據(jù)，用戶可以重復(fù)幾次選擇和縮放過程（直到無法進(jìn)一步縮放為止）。單擊Reset Chart工具欄上的按鈕，可以將圖表恢復(fù)到其原始的宏觀顯示模式。可以在固定模式下將統(tǒng)計(jì)圖切換到固定模式-選定線段的重影會被印在畫布上，從而使用戶可以通過滾動瀏覽來比較固定段和圖表的其余部分。固定的線段可以拖動到畫布的任何部分。
縮放折線圖的性能基于瀏覽器的技術(shù)能力。一個(gè)典型的縮放折線圖最多可以渲染10,000個(gè)數(shù)據(jù)點(diǎn)，而不會出現(xiàn)任何性能問題。
縮放折線圖中的錨點(diǎn)不可單擊，因?yàn)镕usionCharts不包含用于定義數(shù)據(jù)點(diǎn)外部URL的支持API。
在工具提示中顯示值
默認(rèn)情況下，該useCrossLine屬性設(shè)置為1，啟用。當(dāng)useCrossLine懸停數(shù)據(jù)點(diǎn)時(shí)啟用圖表顯示數(shù)據(jù)值對于所有的系列，圖表顯示與按降序排列的垂直線對準(zhǔn)的工具提示這些值。當(dāng)useCrossLine設(shè)置為0（禁用）時(shí)，將其懸停在數(shù)據(jù)點(diǎn)上僅顯示該數(shù)據(jù)點(diǎn)的值。
要設(shè)置，useCrossLine請參考以下代碼：
{
"chart": {
"useCrossLine": "1"
},
}
FusionCharts Suite XT縮放線雙y軸圖與縮放線圖一樣，用于分析宏觀和微觀水平的數(shù)據(jù)。使用雙y軸，此圖表可用于在同一圖表上繪制屬于具有不同數(shù)字單位的數(shù)據(jù)集的數(shù)據(jù)，這與使用常規(guī)縮放線圖相比具有優(yōu)勢。
使用縮放線雙Y軸圖表的另一個(gè)優(yōu)點(diǎn)是，當(dāng)您要比較兩個(gè)數(shù)據(jù)集時(shí)，一個(gè)數(shù)據(jù)集的值分布在較小的時(shí)間間隔上，而另一個(gè)數(shù)據(jù)集的值之間存在較大的時(shí)間間隔。在這種情況下，如果使用縮放折線圖，則間隔較小的數(shù)據(jù)集將被繪制為一條直線。
要?jiǎng)?chuàng)建縮放線雙Y軸圖表，請將type屬性設(shè)置為zoomlinedy。
有關(guān)屬性的詳細(xì)列表，請參閱統(tǒng)計(jì)圖的統(tǒng)計(jì)圖屬性頁面zoomlinedy。
下圖顯示了縮放的雙Y軸圖表，用于比較上一年每一天的唯一客流量與銷售額（以美元為單位）。
限制數(shù)據(jù)標(biāo)簽的數(shù)量
默認(rèn)情況下，縮放折線圖顯示盡可能多的數(shù)據(jù)標(biāo)簽，而不會造成混亂。但是，也可以通過在numVisibleLabels屬性中指定數(shù)量來限制在任何給定時(shí)間可見的數(shù)據(jù)標(biāo)簽的最大數(shù)量。在下面給出的示例中，在一個(gè)屏幕上呈現(xiàn)的標(biāo)簽數(shù)為12。要查看前面或后面的標(biāo)簽，您將需要使用滾動條。
請參閱下面給出的代碼：
{
"chart": {
"numVisibleLabels": "12"
},
}
限制最大標(biāo)簽數(shù)量的縮放折線圖如下所示：
numVisibleLabels屬性僅限制可見數(shù)據(jù)標(biāo)簽的數(shù)量；它不會影響可見數(shù)據(jù)點(diǎn)的數(shù)量。
設(shè)置數(shù)據(jù)圖之間的距離
在縮放折線圖中，使用pixelsPerPoint屬性設(shè)置連續(xù)數(shù)據(jù)圖之間的距離（以像素為單位）。更大數(shù)量的像素將導(dǎo)致更高質(zhì)量的顯示。
請參閱下面給出的代碼：
{
"chart": {
"pixelsPerPoint": "40"
},
}
縮放折線圖中的錨點(diǎn)不可單擊，因?yàn)镕usionCharts不包含用于定義數(shù)據(jù)點(diǎn)外部URL的支持API。
設(shè)置錨定顯示條件
為了減少混亂，僅當(dāng)連續(xù)數(shù)據(jù)點(diǎn)之間的距離達(dá)到某個(gè)最小值時(shí)，才可以使錨可見。例如，您可以指示圖表僅在25 pixels相隔連續(xù)數(shù)據(jù)點(diǎn)時(shí)顯示錨。
如果圖表包含大量數(shù)據(jù)，則在連續(xù)數(shù)據(jù)點(diǎn)之間的距離小于25個(gè)像素的宏觀視圖中，錨點(diǎn)將不可見。僅當(dāng)縮放圖表時(shí)，錨點(diǎn)才可見，并且連續(xù)數(shù)據(jù)點(diǎn)之間的距離增加到25個(gè)像素或更高。
要指定連續(xù)數(shù)據(jù)點(diǎn)之間的最小距離，請anchorMinRenderDistance以像素為單位設(shè)置屬性值。
請參閱下面給出的代碼：
{
"chart": {
"anchorMinRenderDistance": "15"
},
}
預(yù)選擇可見數(shù)據(jù)圖的數(shù)量
默認(rèn)情況下，縮放折線圖在一個(gè)屏幕上顯示所有數(shù)據(jù)圖。但是，可以預(yù)先選擇在渲染時(shí)在單個(gè)屏幕上可見的最大數(shù)據(jù)圖數(shù)量。
要預(yù)先選擇屏幕上數(shù)據(jù)圖的數(shù)量，請按照以下步驟操作：
- 設(shè)置displayStartIndex屬性以指定將顯示在圖表最左側(cè)的數(shù)據(jù)標(biāo)簽的索引。
- 設(shè)置displayEndIndex屬性以指定數(shù)據(jù)標(biāo)簽的索引，該索引將顯示在圖表的最右側(cè)。
{
"chart": {
"displayStartIndex": "49",
"displayEndIndex": "253"
}
}
帶有預(yù)選數(shù)量的數(shù)據(jù)圖的縮放折線圖如下所示：
FusionCharts Suite XT包含幾個(gè)用于自定義縮放折線圖外觀的選項(xiàng)。可以配置圖表元素的外觀，例如滾動條和工具欄。
用于配置toolBar圖表按鈕的屬性為：
- 使用設(shè)置十六進(jìn)制代碼toolbarButtonColor，以指定工具欄按鈕的顏色。
- 將showToolBarButtonToolText屬性設(shè)置0為禁用工具欄按鈕的工具提示顯示。此屬性的默認(rèn)值為1。
{
"chart": {
"toolbarButtonColor": "ff0000",
"showToolBarButtonToolText": "0"
}
}
該圖表如下圖所示：
- 使用zoomPaneBgColor屬性設(shè)置十六進(jìn)制代碼以指定縮放窗格的背景顏色。
- 使用zoomPaneBgAlpha屬性設(shè)置縮放窗格的透明度（0到100之間的范圍）。
{
"chart": {
"zoomPaneBgColor": "#a7d7f9",
"zoomPaneBgAlpha": "50"
}
}
要設(shè)置圖表的圖釘平移：- 使用pinLineThicknessDelta屬性指定固定線的粗細(xì)。僅當(dāng)將圖表置于圖釘線模式時(shí)，才會顯示釘圖線。
- 使用pinPaneBgColor屬性指定背景的十六進(jìn)制顏色代碼。
- 使用pinPaneBgAlpha屬性指定圖釘窗格的透明度（0到100之間的范圍）。
{
"chart": {
"pinLineThicknessDelta": "5",
"pinPaneBgColor": "#87919b",
"pinPaneBgAlpha": "50"
}
}
設(shè)置縮小按鈕的縮放模式的屬性列表為：- 指定btnResetChartTooltext屬性以使用提供的字符串替換“重置圖表”按鈕的默認(rèn)工具文本。
- 指定btnZoomOutTooltext屬性以使用提供的字符串替換“縮小”按鈕的默認(rèn)工具文本。
- 指定btnSwitchToZoomModeTooltext屬性以使用提供的字符串替換“切換到縮放模式”的默認(rèn)工具文本。
- 指定btnSwitchToPinModeTooltext屬性以使用提供的字符串替換“切換到引腳模式”按鈕的默認(rèn)工具文本。
{
"chart": {
"btnResetChartTooltext": "Want to Reset? Go for it.",
"btnZoomOutTooltext": "Zoom Out the Chart",
"btnSwitchToZoomModeTooltext": "Yes",
"btnSwitchToPinModeTooltext": "Switch on the Pin Mode",
}
}
要配置圖表的滾動條：- 將十六進(jìn)制代碼設(shè)置為scrollColorattribute，以指定滾動條的顏色。
- 使用scrollHeight屬性指定滾動條的高度。
{
"chart": {
"scrollColor": "#bdbdbd",
"scrollHeight": "15"
}
}
自定義峰數(shù)據(jù)限制
Zoomline圖表顯示了大量數(shù)據(jù)集。例如，您可以使用它來繪制過去10年中兩個(gè)或多個(gè)部門的每日收入。
但是，您看不到圖表的初始顯示中繪制的所有數(shù)據(jù)值。相反，您會看到從數(shù)據(jù)集中明智地選擇的多個(gè)值。這樣，您可以快速確定值的趨勢。該過程還可以減少資源消耗并提高圖表性能。要深入了解數(shù)據(jù)，只需放大以專注于各個(gè)繪圖點(diǎn)即可。
FusionCharts利用自己的邏輯來智能確定初始顯示中顯示的圖。這樣，它可以消除異常值或峰值。因此，請嘗試注意某些值是否超出預(yù)期結(jié)果。例如，如果在恢復(fù)正常之前的一個(gè)月內(nèi)收入急劇下降或增長超出預(yù)期，請尋找離群值。
在上述情況下，您可以在Zoomline圖表中使用3個(gè)屬性：
- showPeakData：采用布爾值
- maxPeakDataLimit：以數(shù)字為值
- minPeakDataLimit：以數(shù)字為值
場景1
要顯示大于圖表中特定值的所有值，請執(zhí)行以下操作：
- 將的值設(shè)置showPeakData為1。
- 將的值設(shè)置為maxPeakDataLimit應(yīng)在圖表上顯示的圖的最小值。
{
"chart": {
...
"showPeakData": "1",
"maxPeakDataLimit": "1000"
},
}
方案2
要顯示小于圖表中特定值的所有值，請執(zhí)行以下操作：
- 將的值設(shè)置showPeakData為1。
- 將的值設(shè)置為minPeakDataLimit應(yīng)在圖表上顯示的圖的最大值。
{
"chart": {
...
"showPeakData": "1",
"minPeakDataLimit": "900"
},
}
場景3
要顯示所有小于最小限制且大于最大限制的值，請執(zhí)行以下操作：
- 將的值設(shè)置showPeakData為1。
- 將的值設(shè)置為minPeakDataLimit應(yīng)在圖表上顯示的圖的最大值。
- 將的值設(shè)置為maxPeakDataLimit應(yīng)在圖表上顯示的圖的最小值。
{
"chart": {
...
"showPeakData": "1",
"minPeakDataLimit": "900",
"maxPeakDataLimit": "1000"
},
}
方案4
在某些情況下，特定值范圍對您比特定離群值更重要。例如-您可能需要在初始顯示的縮放折線圖中包含500-1000范圍內(nèi)的所有值，以及智能檢測到的值。
從FusionCharts v3.12.1起，無法實(shí)現(xiàn)此目的。但是從v3.13.0開始，F(xiàn)usionCharts支持一項(xiàng)新功能，您可以通過將min值設(shè)置為大于max value來反轉(zhuǎn)min-max條件。然后，圖表將包含該范圍內(nèi)的所有值。例如，在v3.13.0中，要包含500-1000范圍內(nèi)的所有值，請執(zhí)行以下操作：
要顯示所有大于最小限制且小于最大限制的值，請執(zhí)行以下操作：
- 將的值設(shè)置showPeakData為1。
- 將的值設(shè)置minPeakDataLimit為1000。
- 將的值設(shè)置maxPeakDataLimit為900。
{
"chart": {
...
"showPeakData": "1",
"minPeakDataLimit": "1000",
"maxPeakDataLimit": "900"
},
}
想要購買FusionCharts Suite XT正版授權(quán)，或了解更多產(chǎn)品信息請點(diǎn)擊
QQ交談
在線咨詢
渝公網(wǎng)安備
50010702500608號
客服熱線