FusionCharts Suite XT是一款图表、仪表、地图的合集,可以帮助开发人员创建复杂的数据可视化应用,这篇文章主要介绍开发人员怎么对图表中涉及的边距和间距进行设置,下列说说的是图表中几种常见的间距和边距,我们这篇文章中将一一举例说明:
- 修改图表边距
- 修改图表标题、轴名字以及轴值的边距和间距
- 修改数据标签和数据值的间距和边距
- 改变图表中绘制区域的间距
1.修改图表边距
图表的边距是指图表外边框和图表里绘制区域所隔的距离,可以从四个方向进行图表边距的设置,下面是详细的代码
{
"chart": {
"theme": "fint",
"caption": "Monthly Revenue",
"subCaption": "Last year",
"xAxisName": "Month",
"yAxisName": "Amount (In USD)",
"chartLeftMargin": "40",
"chartTopMargin": "40",
"chartRightMargin": "40",
"chartBottomMargin": "40",
"numberPrefix": "$",
"showBorder": "1"
},
2.修改图表标题、轴名字以及轴值的边距和间距
{
"chart": {
"theme": "fint",
"caption": "Monthly Revenue",
"subCaption": "Last year",
"xAxisName": "Month",
"yAxisName": "Amount (In USD)",
"yAxisMaxValue": "1200000",
"numberPrefix": "$",
"xAxisNamePadding": "30",
"yAxisNamePadding": "30",
"labelPadding": "15",
"yAxisValuesPadding": "10"
},
3.修改数据标签和数据值的间距和边距
{
"chart": {
"theme": "fint",
"caption": "Monthly Revenue",
"subCaption": "Last year",
"xAxisName": "Month",
"yAxisName": "Amount (In USD)",
"yAxisMaxValue": "1200000",
"rotateValues": "0",
"placeValuesInside": "0",
"numberPrefix": "$",
"valueFontColor": "#333333",
"ValuePadding": "5"
},
4.改变图表中绘制区域的间距
{
"chart": {
"caption": "Quarterly Revenue",
"subCaption": "Last year",
"xAxisName": "Quarter",
"yAxisName": "Amount (In USD)",
"numberPrefix": "$",
"canvasPadding": "30",
"theme": "fint"
},