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正版授权，或了解更多产品信息请点击