javascript - 如何在 FusionCharts JS 中构建多级饼图而不进行填充?
问题描述
我构建了 FusionCharts 多级饼图。但是会出现巨大的缩进。
500 x 500 随着空间的减少,图形大大缩小。 填充 1
100% x 100% 做全尺寸图表时,缩进变得太大。 填充 2
当我减少图形的空间时,图形变得太小了。
我的代码:
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'multilevelpie',
renderAt: 'chart-container',
width: '500',
height: '500',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "",
"subcaption": "",
"showPlotBorder": "1",
"piefillalpha": "60",
"pieborderthickness": "2",
"hoverfillcolor": "#CCCCCC",
"piebordercolor": "#FFFFFF",
"hoverfillcolor": "#CCCCCC",
"numberprefix": "#",
"plottooltext": "$label",
"theme": "fusion",
},
"category": {{ pie }},
}
}
);
fusioncharts.render();
});
解决方案
您可以在图表对象级别使用 pieRadius 属性调整饼图外部的大小,看看这个示例 -
FusionCharts.ready(function() {
var topProductsChart = new FusionCharts({
type: 'multilevelpie',
renderAt: 'chart-container',
id: "myChart",
width: '400',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fusion",
"caption": "Split of Top Products Sold",
"subCaption": "Last Quarter",
"captionFontSize": "14",
"subcaptionFontSize": "14",
"baseFontColor": "#333333",
"baseFont": "Helvetica Neue,Arial",
"basefontsize": "9",
"subcaptionFontBold": "0",
"bgColor": "#ffffff",
"canvasBgColor": "#ffffff",
"showBorder": "0",
"showShadow": "0",
"showCanvasBorder": "0",
"pieFillAlpha": "60",
"pieBorderThickness": "2",
"hoverFillColor": "#cccccc",
"pieBorderColor": "#ffffff",
"useHoverColor": "1",
"showValuesInTooltip": "1",
"showPercentInTooltip": "0",
"numberPrefix": "$",
"plotTooltext": "$label, $$valueK, $percentValue",
"pieRadius": "170"
},
"category": [{
"label": "Sales by category",
"color": "#ffffff",
"value": "150",
"category": [{
"label": "Food & {br}Beverages",
"color": "#f8bd19",
"value": "55.5",
"category": [{
"label": "Breads",
"color": "#f8bd19",
"value": "11.1"
},
{
"label": "Juice",
"color": "#f8bd19",
"value": "27.75"
},
{
"label": "Noodles",
"color": "#f8bd19",
"value": "9.99"
},
{
"label": "Seafood",
"color": "#f8bd19",
"value": "6.66"
}
]
},
{
"label": "Apparel &{br}Accessories",
"color": "#e44a00",
"value": "42",
"category": [{
"label": "Sun Glasses",
"color": "#e44a00",
"value": "10.08"
},
{
"label": "Clothing",
"color": "#e44a00",
"value": "18.9"
},
{
"label": "Handbags",
"color": "#e44a00",
"value": "6.3"
},
{
"label": "Shoes",
"color": "#e44a00",
"value": "6.72"
}
]
},
{
"label": "Baby {br}Products",
"color": "#008ee4",
"value": "22.5",
"category": [{
"label": "Bath &{br}Grooming",
"color": "#008ee4",
"value": "9.45"
},
{
"label": "Feeding",
"color": "#008ee4",
"value": "6.3"
},
{
"label": "Diapers",
"color": "#008ee4",
"value": "6.75"
}
]
},
{
"label": "Electronics",
"color": "#33bdda",
"value": "30",
"category": [{
"label": "Laptops",
"color": "#33bdda",
"value": "8.1"
},
{
"label": "Televisions",
"color": "#33bdda",
"value": "10.5"
},
{
"label": "SmartPhones",
"color": "#33bdda",
"value": "11.4"
}
]
}
]
}]
}
});
topProductsChart.render();
});
这是一个现场演示 - http://jsfiddle.net/cebu68vt/
推荐阅读
- php - 作曲家需要特定的拉取请求
- postgresql - Store and update jsonb value in Postgres
- java - 如何使用循环在 Android 应用程序中按顺序选择项目
- c++ - 将文本存储在 char 数组中,然后比较数组的内容
- go - 使用 S3 Golang SDK 从 S3 下载选择性文件
- node.js - 如何使用超级账本结构节点 sdk 获取交易列表
- regex - 如何使用正则表达式在 Analytics 转化漏斗中插入动态网址?
- python - 具有错误“NoneType”对象的 Python 脚本没有属性“max_row”
- reactjs - 当图像显示在滚动反应时更改文本
- c# - 通用类型。没有装箱转换或类型参数转换