JavaScript圖表工具FusionCharts入門教程（二十）：繪制趨勢元素和直線元素

---

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最新版

繪制趨勢元素

圖表上的趨勢元素包括趨勢線和趨勢區。

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

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

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

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

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

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

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

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

繪制垂直線元素

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

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

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

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

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

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

---

想要購買FusionCharts Suite XT正版授權，或了解更多產品信息請點擊