gpt4 book ai didi

zingchart - ZingChart 中格状饼图的标题

转载 作者:行者123 更新时间:2023-12-04 17:46:04 26 4
gpt4 key购买 nike

我有一个网格样式的饼图(同一网格中有多个饼图),类似于 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
}
],

Full demo of the trellis pie chart with individually styled labels.

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
});
<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
<div id="myChart"></div>


运行上面的代码片段以查看演示。

我在 ZC 团队。我们是来帮忙的!

关于zingchart - ZingChart 中格状饼图的标题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34501651/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com