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來製作專業的JavaScript圖表。
下載FusionCharts最新版【慧都網】
創建縮放折線圖
例如，我們將創建一個縮放折線圖，以繪製去年每一天對harrysfoodmart.com和harrysfashion.com網站的唯一網站訪問次數。
要創建縮放折線圖，請執行以下步驟：
在JSON數據中，以"<attributeName>": "<value>"格式設置屬性及其對應的值。
使用type屬性指定圖表類型。要渲染縮放折線圖，請設置zoomline。
使用renderAt屬性設置容器對象。
使用width和height屬性指定圖表的尺寸。
使用dataFormat屬性設置要傳遞給圖表對象的數據類型（JSON / XML）。
將compactDataMode屬性設置爲，1以指定JSON數據爲緊湊格式。
設置pixelsPerPoint屬性以指定將用於渲染數據點的像素數。更大數量的像素將導致更高質量的顯示。此屬性還用於設置連續數據圖之間的距離。
設置pixelsPerLabel屬性以指定將用於呈現數據標籤的像素數。
使用lineThickness屬性在char上指定線條的粗細。
縮放折線圖中的錨點不可單擊，因爲FusionCharts不包括用於爲數據點定義外部URL的支持API。
這樣創建的縮放折線圖如下所示：
如上圖所示，在渲染時，縮放折線圖顯示了數據的宏觀視圖。數據經過整齊的壓縮，因此所有數據都適合圖表的寬度。當用戶通過在畫布上拖動鼠標光標選擇折線圖的一部分時，所選部分將展開以佔據圖表的整個寬度。
此時，滾動條開始起作用，允許用戶查看在選定數據部分之前或之後的數據。爲了更詳細地分析數據，用戶可以重複幾次選擇和縮放過程（直到無法進一步縮放爲止）。單擊Reset Chart工具欄上的按鈕，可以將圖表恢復到其原始的宏觀顯示模式。
可以在固定模式下將統計圖切換到固定模式-選定線段的重影會被印在畫布上，從而使用戶可以通過滾動瀏覽來比較固定段和圖表的其餘部分。固定的線段可以拖動到畫布的任何部分。
縮放折線圖的性能基於瀏覽器的技術能力。一個典型的縮放折線圖最多可以渲染10,000個數據點，而不會出現任何性能問題。
縮放折線圖中的錨點不可單擊，因爲FusionCharts不包含用於定義數據點外部URL的支持API。
在工具提示中顯示值
默認情況下，該useCrossLine屬性設置爲1，啓用。當useCrossLine懸停數據點時啓用圖表顯示數據值對於所有的系列，圖表顯示與按降序排列的垂直線對準的工具提示這些值。當useCrossLine設置爲0（禁用）時，將其懸停在數據點上僅顯示該數據點的值。
要設置，useCrossLine請參考以下代碼：
{
"chart": {
"useCrossLine": "1"
},
}
創建縮放線雙Y軸圖表
FusionCharts Suite XT縮放線雙y軸圖與縮放線圖一樣，用於分析宏觀和微觀水平的數據。使用雙y軸，此圖表可用於在同一圖表上繪製屬於具有不同數字單位的數據集的數據，這與使用常規縮放線圖相比具有優勢。
使用縮放線雙Y軸圖表的另一個優點是，當您要比較兩個數據集時，一個數據集的值分佈在較小的時間間隔上，而另一個數據集的值之間存在較大的時間間隔。在這種情況下，如果使用縮放折線圖，則間隔較小的數據集將被繪製爲一條直線。
要創建縮放線雙Y軸圖表，請將type屬性設置爲zoomlinedy。
有關屬性的詳細列表，請參閱統計圖的統計圖屬性頁面zoomlinedy。
下圖顯示了縮放的雙Y軸圖表，用於比較上一年每一天的唯一客流量與銷售額（以美元爲單位）。
限制數據標籤的數量
默認情況下，縮放折線圖顯示儘可能多的數據標籤，而不會造成混亂。
但是，也可以通過在numVisibleLabels屬性中指定數量來限制在任何給定時間可見的數據標籤的最大數量。在下面給出的示例中，在一個屏幕上呈現的標籤數爲12。要查看前面或後面的標籤，您將需要使用滾動條。
請參閱下面給出的代碼：
{
"chart": {
"numVisibleLabels": "12"
},
}
限制最大標籤數量的縮放折線圖如下所示：
numVisibleLabels屬性僅限制可見數據標籤的數量；它不會影響可見數據點的數量。
設置數據圖之間的距離
在縮放折線圖中，使用pixelsPerPoint屬性設置連續數據圖之間的距離（以像素爲單位）。更大數量的像素將導致更高質量的顯示。
請參閱下面給出的代碼：
{
"chart": {
"pixelsPerPoint": "40"
},
}
縮放折線圖中的錨點不可單擊，因爲FusionCharts不包含用於定義數據點外部URL的支持API。
設置錨定顯示條件
爲了減少混亂，僅當連續數據點之間的距離達到某個最小值時，纔可以使錨可見。例如，您可以指示圖表僅在25 pixels相隔連續數據點時顯示錨。
如果圖表包含大量數據，則在連續數據點之間的距離小於25個像素的宏觀視圖中，錨點將不可見。僅當縮放圖表時，錨點纔可見，並且連續數據點之間的距離增加到25個像素或更高。
要指定連續數據點之間的最小距離，請anchorMinRenderDistance以像素爲單位設置屬性值。
請參閱下面給出的代碼：
{
"chart": {
"anchorMinRenderDistance": "15"
},
}
預選擇可見數據圖的數量
默認情況下，縮放折線圖在一個屏幕上顯示所有數據圖。但是，可以預先選擇在渲染時在單個屏幕上可見的最大數據圖數量。
要預先選擇屏幕上數據圖的數量，請按照以下步驟操作：
設置displayStartIndex屬性以指定將顯示在圖表最左側的數據標籤的索引。
設置displayEndIndex屬性以指定數據標籤的索引，該索引將顯示在圖表的最右側。
請參閱下面給出的代碼：
{
"chart": {
"displayStartIndex": "49",
"displayEndIndex": "253"
}
}
帶有預選數量的數據圖的縮放折線圖如下所示：
自定義縮放折線圖的外觀
FusionCharts Suite XT包含幾個用於自定義縮放折線圖外觀的選項。可以配置圖表元素的外觀，例如滾動條和工具欄。
用於配置toolBar圖表按鈕的屬性爲：
使用設置十六進制代碼toolbarButtonColor，以指定工具欄按鈕的顏色。
將showToolBarButtonToolText屬性設置0爲禁用工具欄按鈕的工具提示顯示。此屬性的默認值爲1。
請參閱下面給出的代碼：
{
"chart": {
"toolbarButtonColor": "ff0000",
"showToolBarButtonToolText": "0"
}
}
該圖表如下圖所示：
要配置圖表的縮放平移：
使用zoomPaneBgColor屬性設置十六進制代碼以指定縮放窗格的背景顏色。
使用zoomPaneBgAlpha屬性設置縮放窗格的透明度（0到100之間的範圍）。
請參閱下面給出的代碼：
{
"chart": {
"zoomPaneBgColor": "#a7d7f9",
"zoomPaneBgAlpha": "50"
}
}
要設置圖表的圖釘平移：
使用pinLineThicknessDelta屬性指定固定線的粗細。僅當將圖表置於圖釘線模式時，纔會顯示釘圖線。
使用pinPaneBgColor屬性指定背景的十六進制顏色代碼。
使用pinPaneBgAlpha屬性指定圖釘窗格的透明度（0到100之間的範圍）。
請參閱下面給出的代碼：
{
"chart": {
"pinLineThicknessDelta": "5",
"pinPaneBgColor": "#87919b",
"pinPaneBgAlpha": "50"
}
}
設置縮小按鈕的縮放模式的屬性列表爲：
指定btnResetChartTooltext屬性以使用提供的字符串替換“重置圖表”按鈕的默認工具文本。
指定btnZoomOutTooltext屬性以使用提供的字符串替換“縮小”按鈕的默認工具文本。
指定btnSwitchToZoomModeTooltext屬性以使用提供的字符串替換“切換到縮放模式”的默認工具文本。
指定btnSwitchToPinModeTooltext屬性以使用提供的字符串替換“切換到引腳模式”按鈕的默認工具文本。
請參閱下面給出的代碼：
{
"chart": {
"btnResetChartTooltext": "Want to Reset? Go for it.",
"btnZoomOutTooltext": "Zoom Out the Chart",
"btnSwitchToZoomModeTooltext": "Yes",
"btnSwitchToPinModeTooltext": "Switch on the Pin Mode",
}
}
要配置圖表的滾動條：
將十六進制代碼設置爲scrollColorattribute，以指定滾動條的顏色。
使用scrollHeight屬性指定滾動條的高度。
請參閱下面給出的代碼：
{
"chart": {
"scrollColor": "#bdbdbd",
"scrollHeight": "15"
}
}
自定義峯數據限制
Zoomline圖表顯示了大量數據集。例如，您可以使用它來繪製過去10年中兩個或多個部門的每日收入。
但是，您看不到圖表的初始顯示中繪製的所有數據值。相反，您會看到從數據集中明智地選擇的多個值。這樣，您可以快速確定值的趨勢。該過程還可以減少資源消耗並提高圖表性能。要深入瞭解數據，只需放大以專注於各個繪圖點即可。
FusionCharts利用自己的邏輯來智能確定初始顯示中顯示的圖。這樣，它可以消除異常值或峯值。因此，請嘗試注意某些值是否超出預期結果。例如，如果在恢復正常之前的一個月內收入急劇下降或增長超出預期，請尋找離羣值。
在上述情況下，您可以在Zoomline圖表中使用3個屬性：
showPeakData：採用布爾值
maxPeakDataLimit：以數字爲值
minPeakDataLimit：以數字爲值
第一個屬性通知圖表您要定義峯值數據的條件，而其他兩個屬性定義條件。任何大於maxPeakDataLimit（您提供的）的值都被視爲峯值數據，幷包含在縮放線圖的初始顯示中，同時minPeakDataLimit定義了相反的條件。
場景1
要顯示大於圖表中特定值的所有值，請執行以下操作：
將的值設置showPeakData爲1。
將的值設置爲maxPeakDataLimit應在圖表上顯示的圖的最小值。
請參考下面的代碼：
{
"chart": {
...
"showPeakData": "1",
"maxPeakDataLimit": "1000"
},
}
方案2
要顯示小於圖表中特定值的所有值，請執行以下操作：
將的值設置showPeakData爲1。
將的值設置爲minPeakDataLimit應在圖表上顯示的圖的最大值。
請參考下面的代碼：
{
"chart": {
...
"showPeakData": "1",
"minPeakDataLimit": "900"
},
}
場景3
要顯示所有小於最小限制且大於最大限制的值，請執行以下操作：
將的值設置showPeakData爲1。
將的值設置爲minPeakDataLimit應在圖表上顯示的圖的最大值。
將的值設置爲maxPeakDataLimit應在圖表上顯示的圖的最小值。
請參考下面的代碼：
{
"chart": {
...
"showPeakData": "1",
"minPeakDataLimit": "900",
"maxPeakDataLimit": "1000"
},
}
方案4
在某些情況下，特定值範圍對您比特定離羣值更重要。例如-您可能需要在初始顯示的縮放折線圖中包含500-1000範圍內的所有值，以及智能檢測到的值。
從FusionCharts v3.12.1起，無法實現此目的。但是從v3.13.0開始，FusionCharts支持一項新功能，您可以通過將min值設置爲大於max value來反轉min-max條件。然後，圖表將包含該範圍內的所有值。例如，在v3.13.0中，要包含500-1000範圍內的所有值，請執行以下操作：
要顯示所有大於最小限制且小於最大限制的值，請執行以下操作：
將的值設置showPeakData爲1。
將的值設置minPeakDataLimit爲1000。
將的值設置maxPeakDataLimit爲900。
請參考下面的代碼：
{
"chart": {
...
"showPeakData": "1",
"minPeakDataLimit": "1000",
"maxPeakDataLimit": "900"
},
}
想要購買FusionCharts Suite XT正版授權，或瞭解更多產品信息請【諮詢慧都在線客服】