彩票走势图

FusionCharts使用教程:自定义图表——标题和子标题

原创|使用教程|编辑:郑恭琳|2015-12-01 11:52:36.000|阅读 2812 次

概述:本篇教程主要教大家如何设置fusioncharts自定义图表的标题和子标题。

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

相关链接:

FusionCharts图表允许你给图表添加标题、子标题,并且还允许你对它们的属性进行自定义设置。

< 点击下载FusionCharts最新版本>

子标题是略低于标题的文本,如下图所示:

fusionchart

1.设置图表标题和子标题

带有标题和子标题的图表如下图所示:

fusionchart

设置图表标题和子标题所需属性如下表:

属性名称 描述
caption 设置图表标题的文本值。
subCaption 设置图表子标题的文本值。

数据结构如下:
JSON:

{
    "chart": {
        "caption": "Monthly Revenue",
        "subCaption": "Last year",
        "xAxisName": "Month",
        "yAxisName": "Amount(In USD)",
        "numberPrefix": "$",
        "theme": "fint"
    },
    "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 caption="Monthly Revenue" subcaption="Last year" xaxisname="Month" yaxisname="Amount(In USD)" numberprefix="$" theme="fint">
    < 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>

2.自定义图表标题和子标题的字体属性

你可以自定义图表的标题和子标题的字体属性。标题和子标题字体颜色设置为栗色且自定义字体大小的2D柱状图表如下:

fusionchart

设置标题和子标题字体所需属性如下表:

属性名称 描述
captionFont 设置标题字体。
captionFontColor 设置标题字体颜色。
captionFontSize 设置标题字体大小,范围从0到72。
captionFontBold 设置标题字体是否加粗,其值为1(默认)时加粗,为0时正常显示。
subCaptionFont 设置子标题字体。
subCaptionFontColor 设置子标题字体颜色。
subCaptionFontSize 设置子标题字体大小,从0到72。
subCaptionFontBold 设置子标题字体是否加粗,其值为1(默认)时加粗,为0时正常显示。

自定义图表的标题和子标题字体数据结构如下:
JSON:

{
    "chart": {
        "caption": "Quarterly Revenue",
        "subCaption": "Last year",
        "xAxisName": "Quarter",
        "yAxisName": "Amount (In USD)",
        "numberPrefix": "$",
        "captionFont": "Arial",
        "captionFontSize": "18",
        "captionFontColor": "#993300",
        "captionFontBold": "1",
        "subcaptionFont": "Arial",
        "subcaptionFontSize": "14",
        "subcaptionFontColor": "#993300",
        "subcaptionFontBold": "0",
        "theme": "fint"
    },
    "data": [
        {
            "label": "Q1",
            "value": "1950000"
        },
        {
            "label": "Q2",
            "value": "1450000"
        },
        {
            "label": "Q3",
            "value": "1730000"
        },
        {
            "label": "Q4",
            "value": "2120000"
        }
    ]
}

XML:

<chart caption="Quarterly Revenue" subcaption="Last year" xaxisname="Quarter" yaxisname="Amount (In USD)" numberprefix="$" captionfont="Arial" captionfontsize="18" captionfontcolor="#993300" captionfontbold="1" subcaptionfont="Arial" subcaptionfontsize="14" subcaptionfontcolor="#993300" subcaptionfontbold="0" theme="fint">
    < set label="Q1" value="1950000" />
    < set label="Q2" value="1450000" />
    < set label="Q3" value="1730000" />
    < set label="Q4" value="2120000" />
</chart>

3.配置标题对齐方式

标题右下角对齐的2D柱状图表如下图所示:

fusionchart

配置图表标题对齐方式所需属性如下表所示:

属性名称 描述
captionAlignment 设置标题的水平对齐,属性值包括:left、center(默认)、right。
captionOnTop 设置为1时显示在图表的顶部;设置为0时显示在图表的底部。
alignCaptionWithCanvas 设置为1时标题与整个画布对齐;设置为0(默认)时标题与整个图表区域对齐。
captionHorizontalPadding 当标题未设置成水平居中时配置其填充效果(以像素为单位)。

配置图表标题的对齐数据结构如下:
JSON:

{
    "chart": {
        "caption": "Quarterly Revenue",
        "subCaption": "(Last year)",
        "rotateYAxisName": "0",
        "numberPrefix": "$",
        "alignCaptionWithCanvas": "1",
        "captionHorizontalPadding": "2",
        "captionOnTop": "0",
        "captionAlignment": "right",
        "theme": "fint"
    },
    "data": [
        {
            "label": "Q1",
            "value": "1950000"
        },
        {
            "label": "Q2",
            "value": "1450000"
        },
        {
            "label": "Q3",
            "value": "1730000"
        },
        {
            "label": "Q4",
            "value": "2120000"
        }
    ]
}

XML:

<chart caption="Quarterly Revenue" subcaption="(Last year)" rotateyaxisname="0" numberprefix="$" aligncaptionwithcanvas="1" captionhorizontalpadding="2" captionontop="0" captionalignment="right" theme="fint">
    < set label="Q1" value="1950000" />
    < set label="Q2" value="1450000" />
    < set label="Q3" value="1730000" />
    < set label="Q4" value="2120000" />
</chart>

购买最新正版授权!""

慧都年终盛典火爆开启,一年仅一次的最强促销,破冰钜惠不容错过!!优惠详情点击查看>>


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

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


为你推荐

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


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP