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

---

FusionCharts Suite XT是全面的跨平臺(tái)、跨瀏覽器JavaScript圖表套包，其中包括FusionCharts XT、PowerCharts XT 、FusionWidgets XT 、FusionMaps XT。支持 ASP、 ASP.NET、 PHP、 JSP、 ColdFusion、 Ruby on Rails、 JavaScript、甚至簡(jiǎn)單的HTML頁(yè)面。它是你值得信賴的JavaScript圖表解決方案，目前在全球有45萬(wàn)用戶選擇Fusioncharts來(lái)制作專業(yè)的JavaScript圖表。

點(diǎn)擊下載FusionCharts最新版

繪制趨勢(shì)元素

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

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

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

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

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

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

帶有趨勢(shì)線以顯示目標(biāo)價(jià)值的季度銷售摘要圖表如下所示：

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

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

繪制垂直線元素

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

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

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

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

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

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

---

想要購(gòu)買FusionCharts Suite XT正版授權(quán)，或了解更多產(chǎn)品信息請(qǐng)點(diǎn)擊【咨詢?cè)诰€客服】