FusionCharts图表允许你给图表添加标题、子标题,并且还允许你对它们的属性进行自定义设置。
子标题是略低于标题的文本,如下图所示:
1.设置图表标题和子标题
带有标题和子标题的图表如下图所示:
设置图表标题和子标题所需属性如下表:
属性名称 | 描述 |
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柱状图表如下:
设置标题和子标题字体所需属性如下表:
属性名称 | 描述 |
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柱状图表如下图所示:
配置图表标题对齐方式所需属性如下表所示:
属性名称 | 描述 |
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>
相关推荐
FusionCharts参数及功能特性详解实例
FusionCharts在用JSP自定义导出pdf[参照].pdf
利用FusionCharts 实现数据图表展示 利用FusionCharts 实现数据图表展示 利用FusionCharts 实现数据图表展示 利用FusionCharts 实现数据图表展示
FusionCharts是如何在网页呈现图表
FusionCharts是一个JavaScript图表库,可为您的Web和移动应用程序提供100多个图表和2,000多个地图。 所有的可视化都是交互的和动画的,它们以SVG和VML(对于IE 6/7/8)呈现。 此软件包还包含FusionTime(时间序列图...
FusionCharts详细教程,帮助初学者快速入门。
FusionCharts图表控件中文版使用手册。构成fusionCharts的三要素:swf、data.xml、承载图表的载体
其中动画效果用的是Adobe Flash 8 (原Macromedia Flash的)制作的flash , FusionCharts可用于任何网页的脚本语言类似于HTML , .NET,ASP , JSP技术的, PHP , ColdFusion等,提供互动性和强大的图表。...
它包含广泛的图表类型,具有全方位智能的图表报告功能,动画自定义和强大的交互性。Fusioncharts XT必然会使您的应用程序看起来具有惊人的强大效果。 利用Flash和JavaScript(HTML5),FusionCharts XT功能可以实现...
FusionCharts很炫的swf图表控件,很好用
FusionCharts图表组件简单使用
FusionCharts Free(图表flash控件)很好用,有教程和dll.
非常绚的flash图表,支持java,.net,php等
FusionCharts JavaScript图表库的一个简单轻巧的官方React组件。 react-fusioncharts使您可以轻松地在React应用程序或项目中添加JavaScript图表。 Github回购: : 文档: : 支持: : 融合图 官方网站: : ...
本系列文章主要整理和汇总了Flash图表组件FusionCharts的一些技术文档,希望对FusionCharts使用者有帮助,欢迎交流!
具体讲述FusionCharts图表的应用及开发。
用fusioncharts使用json格式数据展示图表
苗条融合图用于FusionCharts JavaScript图表库的简单轻巧的官方Svelte组件。 svelte-fusioncharts使您可以轻松地在Svelte应用程序或项目中添加JavaScript图表。Github回购: : 支持: : 融合图官方网站: : 官方NPM...
fusioncharts图表,用于统计分析,适合web开发人员,界面美观,使用简单。
FusionCharts v3图表 例题