JS图表控件FusionCharts使用教程：定制图表中的趋势线和趋势区

最新推荐文章于 2018-02-26 22:07:14 发布

原创最新推荐文章于 2018-02-26 22:07:14 发布 · 358 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JS图表控件FusionCharts使用教程：定制图表中的趋势线和趋势区

FusionCharts 专栏收录该内容

27 篇文章

订阅专栏

本文详细介绍了FusionCharts中趋势线与趋势区的功能及应用方式，包括如何在图表中设置趋势线和趋势区，以及如何通过工具文本为趋势线添加额外信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

FusionCharts中的趋势线是什么

在FusionCharts图表中，趋势线是横跨图标的水平/垂直线条,用来表示一些预订数据值。

在图表中展示趋势线

用户可以使用<chart>元素中的trendlines属性来显示图表中的趋势线。

示例：

<chart caption='Quarterly Sales Summary' subcaption='Figures in        xAxisName='Quarter' 
yAxisName='Sales' showValues='0'>
    <set label='Qtr 1' value='420500' />
    <set label='Qtr 2' value='295400' />
    <set label='Qtr 3' value='523400' />
    <set label='Qtr 4' value='465400' />
    <trendLines>
        <line startValue='430000' color='009933' displayvalue='Target' />
    </trendLines>
</chart>

Flash图表控件FusionCharts使用教程：定制图表中的趋势线和趋势区

趋势线是按照用户指定的值进行绘制。如果指定的值不是在图表的限制范围中,那么趋势线就完全不会显示出来。

显示图表中趋势线的文本

当用户使用toolText属性的时候，趋势线也可以显示文本信息。用户可以根据下列数据为趋势线指定一个自定义工具文本:

<chart caption='Quarterly Sales Summary' subcaption='Figures in
 xAxisName='Quarter' yAxisName='Sales' showValues='0'>
     <set label='Qtr 1' value='420500' />
     <set label='Qtr 2' value='295400' />
     <set label='Qtr 3' value='523400' />
     <set label='Qtr 4' value='465400' />
     <trendLines>
         <line startValue='430000' color='009933' displayvalue='Target'
               toolText='This trend was calculated last year'/>
     </trendLines>
 </chart>

Flash图表控件FusionCharts使用教程：定制图表中的趋势线和趋势区

什么是FusionCharts的趋势区

趋势区域类似于趋势线,只是标出的是一个区域整个区而不是一条线。用户可以使用isTrendZone属性指定图表的趋势区，如下所示：

Flash图表控件FusionCharts使用教程：定制图表中的趋势线和趋势区

<trendLines>
         <line startValue='350000' endValue='500000' isTrendZone='1'
               color='009933' displayvalue='Target' />
 </trendLines>