FusionCharts允许你给图表添加X轴和Y轴,并且对其属性进行配置,你可以配置X、Y轴的名称、字体属性以及边框属性。下面从四个方面来逐一介绍如何自定义X、Y轴。
1.设置轴名称
X轴名称为“Quarter”且Y轴名称为“Amount (In USD)”的2D柱状图表如下图所示:
配置图表轴名称所需属性如下表所示:
属性名称 | 描述 |
xAxisName | 设置图表的X轴标题。 |
yAxisName | 设置图表的Y轴标题。 |
指定图表轴名称的数据结构如下:
JSON:
{ "chart": { "caption": "Quarterly Revenue", "subCaption": "Last year", "xAxisName": "Quarter", "yAxisName": "Amount {br}(In USD)", "rotateYAxisName": "0", "numberPrefix": "$", "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 {br}(In USD)" rotateyaxisname="0" numberprefix="$" theme="fint"> < set label="Q1" value="1950000" /> < set label="Q2" value="1450000" /> < set label="Q3" value="1730000" /> < set label="Q4" value="2120000" /> </chart>
2.设置轴名称的字体属性
你可以通过配置轴名称的属性使之看起来更美观,配置过轴名称字体属性的2D柱状图如下所示:
配置X轴、Y轴字体所需属性如下表:
属性名称 | 描述 |
xAxisNameFont (yAxisNameFont) | 设置X轴(Y轴)名称的字体。 |
xAxisNameFontColor (yAxisNameFontColor) | 设置X轴(Y轴)名称的颜色。 |
xAxisNameFontSize (yAxisNameFontSize) | 设置X轴(Y轴)名称的字体大小,从0到72。 |
xAxisNameFontBold (yAxisNameFontBold) | 为1(默认)时将X轴(Y轴)名称设置为加粗;为0时设置为正常。 |
xAxisNameFontItalic (yAxisNameFontItalic) | 为1时将X轴(Y轴)名称设置为斜体;为0(默认)时设置为正常。 |
配置轴名称字体数据结构如下:
JSON:
{ "chart": { "caption": "Quarterly Revenue", "subCaption": "Last year", "xAxisName": "Quarter", "yAxisName": "Amount (In USD)", "numberPrefix": "$", "datalabelColor": "#999999", "xAxisNameFont": "Arial", "xAxisNameFontSize": "12", "xAxisNameFontColor": "#993300", "xAxisNameFontBold": "1", "xAxisNameFontItalic": "1", "xAxisNameAlpha": "80", "yAxisNameFont": "Arial", "yAxisNameFontSize": "12", "yAxisNameFontColor": "#993300", "yAxisNameFontBold": "1", "yAxisNameFontItalic": "1", "yAxisNameAlpha": "80", "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="$" datalabelcolor="#999999" xaxisnamefont="Arial" xaxisnamefontsize="12" xaxisnamefontcolor="#993300" xaxisnamefontbold="1" xaxisnamefontitalic="1" xaxisnamealpha="80" yaxisnamefont="Arial" yaxisnamefontsize="12" yaxisnamefontcolor="#993300" yaxisnamefontbold="1" yaxisnamefontitalic="1" yaxisnamealpha="80" 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柱状图如下图所示:
配置轴名称边框所需属性如下表:
属性名称 | 描述 |
xAxisNameBorderColor (yAxisNameBorderColor) | 设置轴名称边框颜色。 |
xAxisNameBorderAlpha (yAxisNameBorderAlpha) | 设置轴名称边框的透明度。 |
xAxisNameBorderPadding (yAxisNameBorderPadding) | 设置轴名称边框的填充效果。 |
xAxisNameBorderRadius (yAxisNameBorderRadius) | 设置轴名称边框的半径。 |
xAxisNameBorderThickness (yAxisNameBorderThickness) | 设置轴名称边框的厚度。 |
xAxisNameBorderDashed (yAxisNameBorderDashed) | 为1时设置轴名称边框为虚线;为0时移除虚线。 |
xAxisNameBorderDashLen (yAxisNameBorderDashLen) | 设置轴名称虚线边框效果中的短线长度。 |
xAxisNameBorderDashGap (yAxisNameBorderDashGap) | 设置轴名称虚线边框效果中两个短线之间的空白距离。 |
配置轴名称边框属性的数据结构如下:
JSON:
{ "chart": { "caption": "Quarterly Revenue", "subCaption": "Last year", "xAxisName": "Quarter", "yAxisName": "Amount (In USD)", "numberPrefix": "$", "xAxisNamePadding": "20", "yAxisNamePadding": "10", "xAxisNameBorderColor": "#6666FF", "xAxisNameBorderAlpha": "50", "xAxisNameBorderPadding": "6", "xAxisNameBorderRadius": "3", "xAxisNameBorderThickness": "2", "xAxisNameBorderDashed": "1", "xAxisNameBorderDashLen": "4", "xAxisNameBorderDashGap": "2", "yAxisNameBorderColor": "#6666FF", "yAxisNameBorderAlpha": "50", "yAxisNameBorderPadding": "6", "yAxisNameBorderRadius": "3", "yAxisNameBorderThickness": "2", "yAxisNameBorderDashed": "1", "yAxisNameBorderDashLen": "4", "yAxisNameBorderDashGap": "2", "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="$" xaxisnamepadding="20" yaxisnamepadding="10" xaxisnamebordercolor="#6666FF" xaxisnameborderalpha="50" xaxisnameborderpadding="6" xaxisnameborderradius="3" xaxisnameborderthickness="2" xaxisnameborderdashed="1" xaxisnameborderdashlen="4" xaxisnameborderdashgap="2" yaxisnamebordercolor="#6666FF" yaxisnameborderalpha="50" yaxisnameborderpadding="6" yaxisnameborderradius="3" yaxisnameborderthickness="2" yaxisnameborderdashed="1" yaxisnameborderdashlen="4" yaxisnameborderdashgap="2" theme="fint"> < set label="Q1" value="1950000" /> < set label="Q2" value="1450000" /> < set label="Q3" value="1730000" /> < set label="Q4" value="2120000" /> </chart>
4.设置轴名称的字体透明度和字体背景
轴名称背景设置为蓝色且设置高透明度的2D柱状图表如下图所示:
设置轴名称背景所需属性如下表:
属性名称 | 描述 |
xAxisNameFontAlpha (yAxisNameFontAlpha) | 设置轴名称字体的透明度。 |
xAxisNameBgColor (yAxisNameBgColor) | 设置轴名称的背景颜色。 |
xAxisNameBgAlpha (yAxisNameBgAlpha) | 设置轴名称的背景透明度。 |
xAxisNameAlpha (yAxisNameAlpha) | 设置轴名称的透明度。 |
配置轴名称字体透明度及属性的数据结构如下:
JSON:
{ "chart": { "caption": "Quarterly Revenue", "subCaption": "Last year", "xAxisName": "Quarter", "yAxisName": "Amount (In USD)", "yAxisNamePadding": "14", "numberPrefix": "$", "xAxisNameFont": "Arial", "xAxisNameFontSize": "14", "xAxisNameBgColor": "#3399ff", "xAxisNameBgAlpha": "20", "xAxisNameFontAlpha": "50", "xAxisNameBorderPadding": "10", "yAxisNameFont": "Arial", "yAxisNameFontSize": "14", "yAxisNameBgColor": "#3399ff", "yAxisNameBgAlpha": "20", "yAxisNameFontAlpha": "50", "yAxisNameBorderPadding": "10", "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)" yaxisnamepadding="14" numberprefix="$" xaxisnamefont="Arial" xaxisnamefontsize="14" xaxisnamebgcolor="#3399ff" xaxisnamebgalpha="20" xaxisnamefontalpha="50" xaxisnameborderpadding="10" yaxisnamefont="Arial" yaxisnamefontsize="14" yaxisnamebgcolor="#3399ff" yaxisnamebgalpha="20" yaxisnamefontalpha="50" yaxisnameborderpadding="10" 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是一个JavaScript图表库,可为您的Web和移动应用程序提供100多个图表和2,000多个地图。 所有的可视化都是交互的和动画的,它们以SVG和VML(对于IE 6/7/8)呈现。 此软件包还包含FusionTime(时间序列图...
FusionCharts是如何在网页呈现图表
玩转FusionCharts:Y轴数字形式(如去掉K,加前缀什么的。
FusionCharts详细教程,帮助初学者快速入门。
FusionCharts图表控件中文版使用手册。构成fusionCharts的三要素:swf、data.xml、承载图表的载体
其中动画效果用的是Adobe Flash 8 (原Macromedia Flash的)制作的flash , FusionCharts可用于任何网页的脚本语言类似于HTML , .NET,ASP , JSP技术的, PHP , ColdFusion等,提供互动性和强大的图表。...
FusionCharts图表组件简单使用
FusionCharts很炫的swf图表控件,很好用
它包含广泛的图表类型,具有全方位智能的图表报告功能,动画自定义和强大的交互性。Fusioncharts XT必然会使您的应用程序看起来具有惊人的强大效果。 利用Flash和JavaScript(HTML5),FusionCharts XT功能可以实现...
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开发人员,界面美观,使用简单。