我有一个格子样式饼图(同一网格中有多个饼图),类似于http://www.zingchart.com/docs/chart-types/pie/#pie__trellis_chart.我使用的代码与该页面上的代码非常相似.
我想在每个饼图上添加一个独特的标题.例如,如果有4个饼图,每个饼代表一年中的不同季度,那么第一个将表示"Q1",第二个表示"Q2"等.
格子样式饼图不能使用每个饼的标题对象.这里有两个选项:
A)坚持使用格子并为您的标题使用单独定位/样式标签:
labels:[ { text:"Title 1", x: "22%", y: "10%", fontSize: 16 }, { text:"Title 2", x: "71%", y: "10%", fontSize: 16 }, { text:"Title 3", x: "22%", y:"54%", fontSize: 16 }, { text: "Title 4", x: "71%", y:"54%", fontSize: 16 } ],
带有单独样式标签的格子饼图的完整演示.
B)使用带有4个饼图的图形集,而不是使用格子.这样您就可以访问每个饼图的标题对象.
var myConfig = {
"graphset": [{
"type": "pie",
"title": {
"text": "Title 1"
},
"series": [{
"values": [59]
}, {
"values": [55]
}, {
"values": [30]
}, {
"values": [28]
}, {
"values": [15]
}]
}, {
"type": "pie",
"title": {
"text": "Title 2"
},
"series": [{
"values": [60]
}, {
"values": [40]
}, {
"values": [35]
}, {
"values": [30]
}, {
"values": [20]
}, ]
}, {
"type": "pie",
"title": {
"text": "Title 3"
},
"series": [{
"values": [50]
}, {
"values": [40]
}, {
"values": [30]
}, {
"values": [20]
}, {
"values": [10]
}, ]
}, {
"type": "pie",
"title": {
"text": "Title 4"
},
"series": [{
"values": [40]
}, {
"values": [55]
}, {
"values": [49]
}, {
"values": [40]
}, {
"values": [16]
}, ]
}]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: 400,
width: 600
});