彩票走势图

FusionCharts使用教程：自定义图表——垂直分隔线

原创|使用教程|编辑：郑恭琳|2016-02-15 14:12:33.000|阅读 1919 次

概述：垂直分隔线（条形图中的水平分隔线）或vlines是区分图表中数据块的元素。它们可以被放置在任何两个数据点之间，或与特定的数据点对齐。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接：

< FusionChart最新版本下载>

fusionchart垂直分隔线

配置垂直分割线的位置

你可以配置垂直分隔线的显示位置。垂直分隔线显示在Friday和Saturday数据点数据点之间的折线图如下图所示：

fusionchart垂直分隔线

下表是配置垂直分隔线显示位置所需的属性：

属性名称 描述
linePosition 用来指定垂直分隔线的相对位置，取值从0到1。如果垂直分隔线被绘制在两个数据点之间，那么第一个数据点就是0，第二个数据点就是1。默认情况下，取值为0.5时垂直分隔线显示在两个数据点之间。
vLine 设置为1时显示垂直分隔线；设置为0时隐藏垂直分隔线。

上图所示的配置垂直分隔线的数据结构如下：

JSON:

{
    "chart": {
        "theme": "fint",
        "caption": "Visitors to website",
        "subCaption": "Last week",
        "xAxisName": "Day",
        "yAxisName": "Visits",
        "showValues": "0"
    },
    "data": [
        {
            "label": "Mon",
            "value": "5123"
        },
        {
            "label": "Tue",
            "value": "4233"
        },
        {
            "label": "Wed",
            "value": "5507"
        },
        {
            "label": "Thu",
            "value": "4110"
        },
        {
            "label": "Fri",
            "value": "5529"
        },
        {
            "vline": "true",
            "label": "Weekend Start",
            "linePosition": "0.7"
        },
        {
            "label": "Sat",
            "value": "5803"
        },
        {
            "label": "Sun",
            "value": "6202"
        }
    ]
}

XML:

<chart theme="fint" caption="Visitors to website" subcaption="Last week" xaxisname="Day" yaxisname="Visits" showvalues="0">
    < set label="Mon" value="5123" />
    < set label="Tue" value="4233" />
    < set label="Wed" value="5507" />
    < set label="Thu" value="4110" />
    < set label="Fri" value="5529" />
    < vline label="Weekend Start" lineposition="0.7" />
    < set label="Sat" value="5803" />
    < set label="Sun" value="6202" />
</chart>

配置垂直分隔线标签

创建标签

垂直分隔线具有标签的折线图如下图所示：

fusionchart垂直分隔线

下表是创建垂直分隔线标签所需的属性：

属性名称 描述
label 用于指定特定垂直分割线的标题。

给垂直分隔线添加标签的数据结构如下：

JSON:

{
    "chart": {
        "theme": "fint",
        "caption": "Visitors to website",
        "subCaption": "Last week",
        "xAxisName": "Day",
        "yAxisName": "Visits",
        "showValues": "0"
    },
    "data": [
        {
            "label": "Mon",
            "value": "5123"
        },
        {
            "label": "Tue",
            "value": "4233"
        },
        {
            "label": "Wed",
            "value": "5507"
        },
        {
            "label": "Thu",
            "value": "4110"
        },
        {
            "label": "Fri",
            "value": "5529"
        },
        {
            "vline": "true",
            "label": "Weekend",
            "linePosition": "1",
            "labelPosition": "0.5"
        },
        {
            "label": "Sat",
            "value": "5803"
        },
        {
            "label": "Sun",
            "value": "6202"
        }
    ]
}

XML:

<chart theme="fint" caption="Visitors to website" subcaption="Last week" xaxisname="Day" yaxisname="Visits" showvalues="0">
    < set label="Mon" value="5123" />
    < set label="Tue" value="4233" />
    < set label="Wed" value="5507" />
    < set label="Thu" value="4110" />
    < set label="Fri" value="5529" />
    < vline label="Weekend" lineposition="1" labelposition="0.5" />
    < set label="Sat" value="5803" />
    < set label="Sun" value="6202" />
</chart>

配置标签位置

将标签的位置设置为显示在垂直分隔线的中间位置，效果图如下：

fusionchart垂直分隔线

下表是设置垂直分隔线标签位置所需的属性：

属性名称 描述
labelPosition 用于指定垂直分隔线标签的相对位置，取值从0到1。在垂直图表中，取值为0时显示在画布的顶部，为1时显示在画布的底部。在水平图表中。取值为0时显示在画布的左边，为1时显示在画布的右边。

上图所示配置垂直分隔线标签位置的数据结构如下：

JSON:

{
    "chart": {
        "theme": "fint",
        "caption": "Visitors to website",
        "subCaption": "Last week",
        "xAxisName": "Day",
        "yAxisName": "Visits",
        "showValues": "0"
    },
    "data": [
        {
            "label": "Mon",
            "value": "5123"
        },
        {
            "label": "Tue",
            "value": "4233"
        },
        {
            "label": "Wed",
            "value": "5507"
        },
        {
            "label": "Thu",
            "value": "4110"
        },
        {
            "label": "Fri",
            "value": "5529"
        },
        {
            "vline": "true",
            "label": "Weekend",
            "linePosition": "1",
            "labelPosition": "0.5"
        },
        {
            "label": "Sat",
            "value": "5803"
        },
        {
            "label": "Sun",
            "value": "6202"
        }
    ]
}

XML:

<chart theme="fint" caption="Visitors to website" subcaption="Last week" xaxisname="Day" yaxisname="Visits" showvalues="0">
    < set label="Mon" value="5123" />
    < set label="Tue" value="4233" />
    < set label="Wed" value="5507" />
    < set label="Thu" value="4110" />
    < set label="Fri" value="5529" />
    < vline label="Weekend" lineposition="1" labelposition="0.5" />
    < set label="Sat" value="5803" />
    < set label="Sun" value="6202" />
</chart>

配置标签的对齐方式

自定义垂直分隔线标签对齐方式的效果图如下：

fusionchart垂直分隔线
fusionchart垂直分隔线

第一张图表中的垂直分隔线标签与顶部垂直对齐并且与左边水平对齐。第二张图表中的垂直分隔线与底部垂直对齐并且与右边水平对齐。

下表是设置垂直分隔线标签对齐方式所需的属性：

属性名称 描述
labelHAlign 用于指定垂直分隔线标签的水平锚点。该属性的取值有left、center(默认)和right。
labelVAlign 用于指定垂直分隔线标签的垂直锚点。该属性的取值有top、middle(默认)和bottom。

配置标签对齐方式的数据结构如下：

图一：

JSON:

{
    "chart": {
        "theme": "fint",
        "caption": "Visitors to website",
        "subCaption": "Last week",
        "xAxisName": "Day",
        "yAxisName": "Visits",
        "showValues": "0"
    },
    "data": [
        {
            "label": "Mon",
            "value": "5123"
        },
        {
            "label": "Tue",
            "value": "4233"
        },
        {
            "label": "Wed",
            "value": "5507"
        },
        {
            "label": "Thu",
            "value": "4110"
        },
        {
            "label": "Fri",
            "value": "5529"
        },
        {
            "vline": "true",
            "linePosition": "0",
            "label": "Weekdays",
            "labelPosition": "0",
            "color": "#6da81e",
            "thickness": "1",
            "alpha": "50",
            "labelVAlign": "middle",
            "labelHAlign": "right"
        },
        {
            "label": "Sat",
            "value": "5803"
        },
        {
            "label": "Sun",
            "value": "6202"
        }
    ]
}

XML:

<chart theme="fint" caption="Visitors to website" subcaption="Last week" xaxisname="Day" yaxisname="Visits" showvalues="0">
    < set label="Mon" value="5123" />
    < set label="Tue" value="4233" />
    < set label="Wed" value="5507" />
    < set label="Thu" value="4110" />
    < set label="Fri" value="5529" />
    < vline lineposition="0" label="Weekdays" labelposition="0" color="#6da81e" thickness="1" alpha="50" labelvalign="middle" labelhalign="right" />
    < set label="Sat" value="5803" />
    < set label="Sun" value="6202" />
</chart>

图二：

JSON:

{
    "chart": {
        "theme": "fint",
        "chartRightMargin": "40",
        "caption": "Visitors to website",
        "subCaption": "Last week",
        "xAxisName": "Day",
        "yAxisName": "Visits",
        "showValues": "0"
    },
    "data": [
        {
            "label": "Mon",
            "value": "5123"
        },
        {
            "label": "Tue",
            "value": "4233"
        },
        {
            "label": "Wed",
            "value": "5507"
        },
        {
            "label": "Thu",
            "value": "4110"
        },
        {
            "label": "Fri",
            "value": "5529"
        },
        {
            "vline": "true",
            "linePosition": "1",
            "label": "Weekend",
            "labelPosition": "0.95",
            "color": "#6da81e",
            "thickness": "1",
            "alpha": "50",
            "labelVAlign": "middle",
            "labelHAlign": "left"
        },
        {
            "label": "Sat",
            "value": "5803"
        },
        {
            "label": "Sun",
            "value": "6202"
        }
    ]
}

XML:

<chart theme="fint" chartrightmargin="40" caption="Visitors to website" subcaption="Last week" xaxisname="Day" yaxisname="Visits" showvalues="0">
    < set label="Mon" value="5123" />
    < set label="Tue" value="4233" />
    < set label="Wed" value="5507" />
    < set label="Thu" value="4110" />
    < set label="Fri" value="5529" />
    < vline lineposition="1" label="Weekend" labelposition="0.95" color="#6da81e" thickness="1" alpha="50" labelvalign="middle" labelhalign="left" />
    < set label="Sat" value="5803" />
    < set label="Sun" value="6202" />
</chart>

自定义垂直分隔线的显示属性

自定义垂直分隔线为虚线的效果图如下：

fusionchart垂直分隔线

下表是自定义垂直分隔线外观所需的属性：

属性名称 描述
color 用于指定垂直分割线的渲染颜色，用十六进制代码。
thickness 设置垂直分隔线的厚度（用像素）。
alpha 设置垂直分隔线的透明度，取值从0到100。
dashed 设置为1时垂直分隔线呈虚线，设置为0（默认）时为实线。
dashLen 设置垂直分隔线虚线段的长度（用像素）。
dashGap 设置垂直分隔线虚线段间的间隙（用像素）。

上图所示图表的自定义垂直分隔线数据结构如下：

JSON:

{
    "chart": {
        "theme": "fint",
        "caption": "Visitors to website",
        "subCaption": "Last week",
        "xAxisName": "Day",
        "yAxisName": "Visits",
        "showValues": "0"
    },
    "data": [
        {
            "label": "Mon",
            "value": "5123"
        },
        {
            "label": "Tue",
            "value": "4233"
        },
        {
            "label": "Wed",
            "value": "5507"
        },
        {
            "label": "Thu",
            "value": "4110"
        },
        {
            "label": "Fri",
            "value": "5529"
        },
        {
            "vline": "true",
            "linePosition": "1",
            "label": "Weekend",
            "labelPosition": "0.5",
            "color": "#6da81e",
            "thickness": "2",
            "alpha": "50",
            "dashed": "1",
            "dashLen": "4",
            "dashGap": "2"
        },
        {
            "label": "Sat",
            "value": "5803"
        },
        {
            "label": "Sun",
            "value": "6202"
        }
    ]
}

XML:

<chart theme="fint" caption="Visitors to website" subcaption="Last week" xaxisname="Day" yaxisname="Visits" showvalues="0">
    < set label="Mon" value="5123" />
    < set label="Tue" value="4233" />
    < set label="Wed" value="5507" />
    < set label="Thu" value="4110" />
    < set label="Fri" value="5529" />
    < vline lineposition="1" label="Weekend" labelposition="0.5" color="#6da81e" thickness="2" alpha="50" dashed="1" dashlen="4" dashgap="2" />
    < set label="Sat" value="5803" />
    < set label="Sun" value="6202" />
</chart>

配置垂直分隔线标签边框

垂直分隔线标签不带边框效果图如下：

fusionchart垂直分隔线

下表是设置垂直分隔线标签边框所需的属性：

属性名称 描述
showVLineLabelBorder 用于指定是否显示所有垂直分割线的标签边框。该属性可在图表的对象级进行设置。
showLabelBorder 用于指定某个具体的垂直分割线的标签边框。可覆盖图表对象的设置。

上图所示的配置垂直分隔线标签边框的数据结构如下：

JSON:

{
    "chart": {
        "theme": "fint",
        "caption": "Visitors to website",
        "subCaption": "Last week",
        "xAxisName": "Day",
        "yAxisName": "Visits",
        "showValues": "0",
        "showVLineLabelBorder": "0"
    },
    "data": [
        {
            "label": "Mon",
            "value": "5123"
        },
        {
            "label": "Tue",
            "value": "4233"
        },
        {
            "label": "Wed",
            "value": "5507"
        },
        {
            "label": "Thu",
            "value": "4110"
        },
        {
            "label": "Fri",
            "value": "5529"
        },
        {
            "vline": "true",
            "linePosition": "1",
            "label": "Weekend",
            "labelPosition": "0",
            "labelHAlign": "left",
            "labelVAlign": "top",
            "color": "#6da81e",
            "alpha": "50",
            "showLabelBorder": "0"
        },
        {
            "label": "Sat",
            "value": "5803"
        },
        {
            "label": "Sun",
            "value": "6202"
        }
    ]
}

XML:

<chart theme="fint" caption="Visitors to website" subcaption="Last week" xaxisname="Day" yaxisname="Visits" showvalues="0" showvlinelabelborder="0">
    < set label="Mon" value="5123" />
    < set label="Tue" value="4233" />
    < set label="Wed" value="5507" />
    < set label="Thu" value="4110" />
    < set label="Fri" value="5529" />
    < vline lineposition="1" label="Weekend" labelposition="0" labelhalign="left" labelvalign="top" color="#6da81e" alpha="50" showlabelborder="0" />
    < set label="Sat" value="5803" />
    < set label="Sun" value="6202" />
</chart>

购买最新正版授权！详情请""


标签：JavaScript HTML5图表图表库数据可视化图表解决方案图表控件FusionCharts图表

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至chenjj@cahobeh.cn


为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP