FusionCharts使用教程：自定义图表——折线图和面积图标签管理-控件新闻-慧都网

FusionCharts使用教程：自定义图表——折线图和面积图标签管理

原创|使用教程|编辑：郑恭琳|2015-12-30 13:31:55.000|阅读 3317 次

概述：该片教程主要教大家FusionCharts折线图和面积图的数据标签设置和管理。

# 界面/图表报表/文档/IDE等千款热门软控件火热销售中 >>

折线图和面积图标签管理

通过标签管理你可以调整折线图和面积图的画布填充以适应长标签。这保证了第一个和最后一个X轴标签渲染到画布外面以及标签之间不会彼此重叠。

图表会自动调整画布的左右边距来适应长标签。2D折线图的画布填充标签管理如下图所示：

配置了canvasPadding属性的2D面积图如下图所示：

下表是用于设置图表画布填充所需的属性：

属性名称	描述
canvasPadding	用于设置画布边框和第一个数据点（或最后一个数据点）之间的间距。为0表示第一个和最后一个数据锚点将在画布边框上。

设置折线图canvasPadding属性的数据结构如下：

JSON:

{
    "chart": {
        "caption": "Quarterly Revenue",
        "subCaption": "Last year",
        "xAxisName": "Quarter",
        "yAxisName": "Amount (In USD)",
        "numberPrefix": "$",
        "theme": "fint"
    },
    "data": [
        {
            "label": "First Quarter",
            "value": "420000"
        },
        {
            "label": "Second Quarter",
            "value": "810000"
        },
        {
            "label": "Third Quarter",
            "value": "720000"
        },
        {
            "label": "Fourth Quarter",
            "value": "550000"
        }
    ]

XML:

<chart caption="Quarterly Revenue" subcaption="Last year" xaxisname="Quarter" yaxisname="Amount (In USD)" numberprefix="$" theme="fint">
    < set label="First Quarter" value="420000" />
    < set label="Second Quarter" value="810000" />
    < set label="Third Quarter" value="720000" />
    < set label="Fourth Quarter" value="550000" />
</chart>

高级的X轴标签管理可以实现：

所有X轴标签必需与对应的列或点居中对齐
X轴标签间不能重叠
X轴标签不能与其它图表对象如图例或X轴名称重叠
长标签不能超出图表范围
优化长标签的截断，在末尾用省略号

高级的标签管理不适用于Bar、Pie、Doughnut、Marimekko、Zoom Line和Multi-series Combination 3D图表。

自定义数据标签属性

你可以自定义数据标签的属性，如：字体、边框、背景、透明度。

字体属性

2D柱状图自定义数据标签字体、字体颜色、字体大小效果图如下：

下表是用于自定义数据标签字体所需属性：

属性名称	描述
labelFont	用于设置数据标签的字体。
labelFontColor	用于设置数据标签字体的颜色。
labelFontSize	用于设置数据标签字体的大小，从0到72。
labelFontBold	设置为1加粗数据标签字体。
labelFontItalic	为1将数据标签字体设置为斜体。
labelAlpha	用于设置数据标签文本、背景、边框的透明度，取值从0（透明）到100（不透明）。

数据结构如下：

JSON:

{
    "chart": {
        "theme": "fint",
        "caption": "Monthly Revenue",
        "subCaption": "Last year",
        "xAxisName": "Month",
        "yAxisName": "Amount (In USD)",
        "yAxisMaxValue": "1200000",
        "rotateValues": "0",
        "placeValuesInside": "0",
        "numberPrefix": "$",
        "labelFont": "Arial",
        "labelFontColor": "0075c2",
        "labelFontSize": "15"
    },
    "data": [
        {
            "label": "Jan",
            "value": "420000"
        },
        {
            "label": "Feb",
            "value": "810000"
        },
        {
            "label": "Mar",
            "value": "720000"
        },
        {
            "label": "Apr",
            "value": "550000"
        },
        {
            "label": "May",
            "value": "910000"
        },
        {
            "label": "Jun",
            "value": "510000"
        },
        {
            "label": "Jul",
            "value": "680000"
        },
        {
            "label": "Aug",
            "value": "620000"
        },
        {
            "label": "Sep",
            "value": "610000"
        },
        {
            "label": "Oct",
            "value": "490000"
        },
        {
            "label": "Nov",
            "value": "900000"
        },
        {
            "label": "Dec",
            "value": "730000"
        }
    ]
}

XML:

<chart theme="fint" caption="Monthly Revenue" subcaption="Last year" xaxisname="Month" yaxisname="Amount (In USD)" yaxismaxvalue="1200000" rotatevalues="0" placevaluesinside="0" numberprefix="$" labelfont="Arial" labelfontcolor="0075c2" labelfontsize="15">
    < set label="Jan" value="420000" />
    < set label="Feb" value="810000" />
    < set label="Mar" value="720000" />
    < set label="Apr" value="550000" />
    < set label="May" value="910000" />
    < set label="Jun" value="510000" />
    < set label="Jul" value="680000" />
    < set label="Aug" value="620000" />
    < set label="Sep" value="610000" />
    < set label="Oct" value="490000" />
    < set label="Nov" value="900000" />
    < set label="Dec" value="730000" />
</chart>

边框属性

2D柱状图表数据标签虚线边框效果如下图：

下表是自定义数据标签边框所需属性：

属性名称	描述
labelBorderColor	用于设置数据标签边框的颜色。
labelBorderAlpha	用于设置数据标签边框的透明度，取值从0（透明）到100（不透明）。
labelBorderPadding	用于设置数据标签与边框之间的填充。
labelBorderRadius	用于设置数据标签边框的直径（用像素）。
labelBorderThickness	用于设置数据标签边框的厚度（用像素）。
labelBorderDashed	为1将数据标签边框设置为虚线效果。
labelBorderDashGap	用于设置数据标签边框虚线间的空隙（用像素）。
labelBorderDashLen	用于设置数据标签虚线边框的虚线长度（用像素）。

自定义数据标签边框的数据结构如下：

JSON:

{
    "chart": {
        "theme": "fint",
        "caption": "Monthly Revenue",
        "subCaption": "Last year",
        "xAxisName": "Month",
        "yAxisName": "Amount (In USD)",
        "yAxisMaxValue": "1200000",
        "rotateValues": "0",
        "placeValuesInside": "0",
        "numberPrefix": "$",
        "labelFont": "Arial",
        "labelFontColor": "0075c2",
        "labelFontSize": "15",
        "labelBorderColor": "0075c2",
        "labelBorderPadding": "5",
        "labelBorderRadius": "2",
        "labelBorderDashed": "1"
    },
    "data": [
        {
            "label": "Jan",
            "value": "420000"
        },
        {
            "label": "Feb",
            "value": "810000"
        },
        {
            "label": "Mar",
            "value": "720000"
        },
        {
            "label": "Apr",
            "value": "550000"
        },
        {
            "label": "May",
            "value": "910000"
        },
        {
            "label": "Jun",
            "value": "510000"
        },
        {
            "label": "Jul",
            "value": "680000"
        },
        {
            "label": "Aug",
            "value": "620000"
        },
        {
            "label": "Sep",
            "value": "610000"
        },
        {
            "label": "Oct",
            "value": "490000"
        },
        {
            "label": "Nov",
            "value": "900000"
        },
        {
            "label": "Dec",
            "value": "730000"
        }
    ]
}

XML:

<chart theme="fint" caption="Monthly Revenue" subcaption="Last year" xaxisname="Month" yaxisname="Amount (In USD)" yaxismaxvalue="1200000" rotatevalues="0" placevaluesinside="0" numberprefix="$" labelfont="Arial" labelfontcolor="0075c2" labelfontsize="15" labelbordercolor="0075c2" labelborderpadding="5" labelborderradius="2" labelborderdashed="1">
    < set label="Jan" value="420000" />
    < set label="Feb" value="810000" />
    < set label="Mar" value="720000" />
    < set label="Apr" value="550000" />
    < set label="May" value="910000" />
    < set label="Jun" value="510000" />
    < set label="Jul" value="680000" />
    < set label="Aug" value="620000" />
    < set label="Sep" value="610000" />
    < set label="Oct" value="490000" />
    < set label="Nov" value="900000" />
    < set label="Dec" value="730000" />
</chart>

背景属性

2D柱状图自定义数据标签背景下过如下：

下表是自定义数据标签背景所需的属性：

属性名称	描述
labelBgColor	用于设置数据标签的背景颜色。
labelBgAlpha	用于设置数据标签背景的透明度。取值从0（透明）到100（不透明）。

自定义数据标签背景的数据结构如下：

JSON:

{
    "chart": {
        "theme": "fint",
        "caption": "Monthly Revenue",
        "subCaption": "Last year",
        "xAxisName": "Month",
        "yAxisName": "Amount (In USD)",
        "yAxisMaxValue": "1200000",
        "rotateValues": "0",
        "placeValuesInside": "0",
        "numberPrefix": "$",
        "labelFont": "Arial",
        "labelFontColor": "0075c2",
        "labelFontSize": "15",
        "labelBorderColor": "0075c2",
        "labelBorderPadding": "5",
        "labelBorderRadius": "2",
        "labelBorderDashed": "1",
        "labelBgColor": "eeeeee"
    },
    "data": [
        {
            "label": "Jan",
            "value": "420000"
        },
        {
            "label": "Feb",
            "value": "810000"
        },
        {
            "label": "Mar",
            "value": "720000"
        },
        {
            "label": "Apr",
            "value": "550000"
        },
        {
            "label": "May",
            "value": "910000"
        },
        {
            "label": "Jun",
            "value": "510000"
        },
        {
            "label": "Jul",
            "value": "680000"
        },
        {
            "label": "Aug",
            "value": "620000"
        },
        {
            "label": "Sep",
            "value": "610000"
        },
        {
            "label": "Oct",
            "value": "490000"
        },
        {
            "label": "Nov",
            "value": "900000"
        },
        {
            "label": "Dec",
            "value": "730000"
        }
    ]
}

XML:

< chart theme="fint" caption="Monthly Revenue" subcaption="Last year" xaxisname="Month" yaxisname="Amount (In USD)" yaxismaxvalue="1200000" rotatevalues="0" placevaluesinside="0" numberprefix="$" labelfont="Arial" labelfontcolor="0075c2" labelfontsize="15" labelbordercolor="0075c2" labelborderpadding="5" labelborderradius="2" labelborderdashed="1" labelbgcolor="eeeeee">
    < set label="Jan" value="420000" />
    < set label="Feb" value="810000" />
    < set label="Mar" value="720000" />
    < set label="Apr" value="550000" />
    < set label="May" value="910000" />
    < set label="Jun" value="510000" />
    < set label="Jul" value="680000" />
    < set label="Aug" value="620000" />
    < set label="Sep" value="610000" />
    < set label="Oct" value="490000" />
    < set label="Nov" value="900000" />
    < set label="Dec" value="730000" />
< /chart>

配置数据标签的高度

下图是带有长数据标签的图表，由于数据标签太长，因此减少了数据图的比例：

你可以使用maxLabelHeight属性来限制数据标签的最大高度。这会截断数据标签，用省略号替换。

属性名称	描述
maxLabelHeight	用于设置数据标签的最大高度（用像素）。

设置数据标签最大高度的数据结构如下：

JSON:

{
    "chart": {
        "theme": "fint",
        "caption": "Monthly Revenue",
        "subCaption": "Last year",
        "xAxisName": "Month",
        "yAxisName": "Amount (In USD)",
        "yAxisMaxValue": "1200000",
        "rotateValues": "0",
        "placeValuesInside": "0",
        "numberPrefix": "$",
        "labelFont": "Arial",
        "labelFontColor": "0075c2",
        "labelFontSize": "15",
        "maxLabelHeight": "50"
    },
    "data": [
        {
            "label": "January [ Q1 ]",
            "value": "420000"
        },
        {
            "label": "February [ Q1 ]",
            "value": "810000"
        },
        {
            "label": "March [ Q1 ]",
            "value": "720000"
        },
        {
            "label": "April [ Q2 ]",
            "value": "550000"
        },
        {
            "label": "May [ Q2 ]",
            "value": "910000"
        },
        {
            "label": "June [ Q2 ]",
            "value": "510000"
        },
        {
            "label": "July [ Q3 ]",
            "value": "680000"
        },
        {
            "label": "August [ Q3 ]",
            "value": "620000"
        },
        {
            "label": "September [ Q3 ]",
            "value": "610000"
        },
        {
            "label": "October [ Q4 ]",
            "value": "490000"
        },
        {
            "label": "November [ Q4 ]",
            "value": "900000"
        },
        {
            "label": "December [ Q4 ]",
            "value": "730000"
        }
    ]
}

XML:

< chart theme="fint" caption="Monthly Revenue" subcaption="Last year" xaxisname="Month" yaxisname="Amount (In USD)" yaxismaxvalue="1200000" rotatevalues="0" placevaluesinside="0" numberprefix="$" labelfont="Arial" labelfontcolor="0075c2" labelfontsize="15" maxlabelheight="50">
    < set label="January [ Q1 ]" value="420000" />
    < set label="February [ Q1 ]" value="810000" />
    < set label="March [ Q1 ]" value="720000" />
    < set label="April [ Q2 ]" value="550000" />
    < set label="May [ Q2 ]" value="910000" />
    < set label="June [ Q2 ]" value="510000" />
    < set label="July [ Q3 ]" value="680000" />
    < set label="August [ Q3 ]" value="620000" />
    < set label="September [ Q3 ]" value="610000" />
    < set label="October [ Q4 ]" value="490000" />
    < set label="November [ Q4 ]" value="900000" />
    < set label="December [ Q4 ]" value="730000" />
< /chart>

添加数据标签链接

数据标签带有//www.fusioncharts.com/链接的2D柱状图如下，点击下面的数据标签，就会链接到fusioncharts星空最火知名网站：

属性名称	描述
labelLink	用于给每一个数据标签设置链接。例如：//www.fusioncharts.com/

数据结构如下：

JSON:

{
    "chart": {
        "theme": "fint",
        "caption": "Monthly Revenue",
        "subCaption": "Last year",
        "xAxisName": "Month",
        "yAxisName": "Amount (In USD)",
        "yAxisMaxValue": "1200000",
        "rotateValues": "0",
        "placeValuesInside": "0",
        "numberPrefix": "$",
        "labelFont": "Arial",
        "labelFontColor": "0075c2",
        "labelFontSize": "15",
        "labelLink": "//www.fusioncharts.com/"
    },
    "data": [
        {
            "label": "Jan",
            "value": "420000"
        },
        {
            "label": "Feb",
            "value": "810000"
        },
        {
            "label": "Mar",
            "value": "720000"
        },
        {
            "label": "Apr",
            "value": "550000"
        },
        {
            "label": "May",
            "value": "910000"
        },
        {
            "label": "Jun",
            "value": "510000"
        },
        {
            "label": "Jul",
            "value": "680000"
        },
        {
            "label": "Aug",
            "value": "620000"
        },
        {
            "label": "Sep",
            "value": "610000"
        },
        {
            "label": "Oct",
            "value": "490000"
        },
        {
            "label": "Nov",
            "value": "900000"
        },
        {
            "label": "Dec",
            "value": "730000"
        }
    ]
}

XML:

< chart theme="fint" caption="Monthly Revenue" subcaption="Last year" xaxisname="Month" yaxisname="Amount (In USD)" yaxismaxvalue="1200000" rotatevalues="0" placevaluesinside="0" numberprefix="$" labelfont="Arial" labelfontcolor="0075c2" labelfontsize="15" labellink="//www.fusioncharts.com/">
    < set label="Jan" value="420000" />
    < set label="Feb" value="810000" />
    < set label="Mar" value="720000" />
    < set label="Apr" value="550000" />
    < set label="May" value="910000" />
    < set label="Jun" value="510000" />
    < set label="Jul" value="680000" />
    < set label="Aug" value="620000" />
    < set label="Sep" value="610000" />
    < set label="Oct" value="490000" />
    < set label="Nov" value="900000" />
    < set label="Dec" value="730000" />
< /chart>

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

2015岁末扫尾之战！全球厂商携手放利！优惠详情点击查看>>

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

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

上一篇：用户界面框架jQuery EasyUI示例大全之Tabs 下一篇：C1DataGrid for WPF基础教程：基础介绍