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圖表。

點擊下載FusionCharts最新版

繪制趨勢元素

圖表上的趨勢元素包括趨勢線和趨勢區(qū)。

趨勢線是水平或垂直參考線，有助于解釋數(shù)據(jù)。它們可用于設(shè)置上下文或定義限制和目標。例如，在繪制公司的季度銷售額時，您可能希望使用趨勢線來描述目標銷售額。趨勢區(qū)與趨勢線相似，不同之處在于它們標出了整個區(qū)域，而不只是一條線。

要在圖表上繪制趨勢線，請執(zhí)行以下步驟：

• 創(chuàng)建一個趨勢線對象以渲染一個或多個趨勢線。
• 為特定趨勢線創(chuàng)建一個對象。
• 在線對象中，設(shè)置startValue屬性以指定趨勢線的起始值。設(shè)置endValue以指定趨勢線的最終值。
• 設(shè)置顏色屬性以指定顏色的十六進制代碼。使用此屬性可以渲染趨勢線及其關(guān)聯(lián)的文本。
• 設(shè)置displayValue屬性以顯示帶有趨勢線的字符串標題。

以下是在圖表上包含趨勢線的JSON代碼：

{
    "chart": {
        ...
    },
    "data": [],
    "trendlines": [{
        "line": [{
            "startvalue": "175000",
            "color": "#29C3BE",
            "displayvalue": "Target - $175K"
        }]
    }]
}

帶有趨勢線以顯示目標價值的季度銷售摘要圖表如下所示：

趨勢區(qū)用于顯示一系列目標值。趨勢區(qū)使用與趨勢線相同的屬性。isTrendZone是用于指定將使用趨勢線還是趨勢區(qū)呈現(xiàn)圖表的屬性。將此屬性設(shè)置為0將呈現(xiàn)趨勢線，將其設(shè)置為1（默認）將呈現(xiàn)趨勢帶。

帶有趨勢區(qū)的季度銷售摘要圖表顯示了一系列目標值，如下所示：

繪制垂直線元素

垂直（或在條形圖的情況下為水平）分隔線是可以區(qū)分圖表中數(shù)據(jù)塊的元素。它們可以放置在任何兩個數(shù)據(jù)點之間，也可以與特定數(shù)據(jù)點對齊。

要在圖表中繪制垂直線，請按照以下步驟操作：

• 將vLine屬性設(shè)置為true在圖表上繪制垂直線。
• 指定label屬性以設(shè)置垂直線的標簽。該標簽將沿x軸呈現(xiàn)。
• 使用linePosition屬性設(shè)置垂直線的位置。此屬性相對于要在其間繪制的兩個數(shù)據(jù)點定位。

下面給出的是JSON代碼，可在圖表上包含垂直線：

{
  "chart": {
      ...
  },
  "data": [],
  "trendlines": [
    {
      "line": [
        {
          "vline": "true",
          "label": "Weekend Start",
          "color": "#29C3BE",
          "linePosition": "0.7"
        }
      ]
    }
  ]
}

帶有垂直線的折線圖如下所示：