JavaScript图表工具FusionCharts入门教程(二十):绘制趋势元素和直线元素

翻译|使用教程|编辑:莫成敏|2020-06-05 14:14:19.443|阅读 11 次

概述:趋势线是水平或垂直参考线,有助于解释数据。趋势区与趋势线相似,不同之处在于它们标出了整个区域,而不只是一条线。垂直(或在条形图的情况下为水平)分隔线是可以区分图表中数据块的元素。

# 您正在找协同办公软件吗?点击这里站长给您推荐 #

相关链接:

FusionCharts Suite XT是全面的跨平台、跨浏览器JavaScript图表套包,其中包括FusionCharts XTPowerCharts XTFusionWidgets XTFusionMaps 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"
        }]
    }]
}

带有趋势线以显示目标价值的季度销售摘要图表如下所示:

JavaScript图表工具FusionCharts入门教程(二十):绘制趋势元素和直线元素

趋势区用于显示一系列目标值。趋势区使用与趋势线相同的属性。isTrendZone是用于指定将使用趋势线还是趋势区呈现图表的属性。将此属性设置为0将呈现趋势线,将其设置为1(默认)将呈现趋势带。

带有趋势区的季度销售摘要图表显示了一系列目标值,如下所示:

JavaScript图表工具FusionCharts入门教程(二十):绘制趋势元素和直线元素

绘制垂直线元素

垂直(或在条形图的情况下为水平)分隔线是可以区分图表中数据块的元素。它们可以放置在任何两个数据点之间,也可以与特定数据点对齐。

要在图表中绘制垂直线,请按照以下步骤操作:

  • 将vLine属性设置为true在图表上绘制垂直线。
  • 指定label属性以设置垂直线的标签。该标签将沿x轴呈现。
  • 使用linePosition属性设置垂直线的位置。此属性相对于要在其间绘制的两个数据点定位。

下面给出的是JSON代码,可在图表上包含垂直线:

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

带有垂直线的折线图如下所示:

JavaScript图表工具FusionCharts入门教程(二十):绘制趋势元素和直线元素


想要购买FusionCharts Suite XT正版授权,或了解更多产品信息请点击【咨询在线客服】




标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,尊重他人劳动成果

文章转载自:InfoSoft https://www.fusioncharts.com/dev/chart-guide/standard-charts/line-area-and-column-charts

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关厂商
相关产品
FusionCharts XT

50万用户首选的跨平台、跨浏览器的JavaScript/HTML图表解决方案

FusionCharts Suite XT

全面的跨平台、跨浏览器JavaScript图表解决方案套包,拥有90+图表和900+地图

FusionWidgets XT

FusionWidgets XT操作简单,提供各种实时图表、金融图表、支持图表自动更新

PowerCharts XT

适用于专业领域的高级图表控件

FusionMaps XT

功能强大的JavaScript (HTML5)地图工具,可以根据内容、地区来展现及描绘地理数据或者其它实体。

在线
客服
咨询
电话
400-700-1020
在线
QQ
购物车 反馈 返回
顶部
在线客服系统
live chat