ZingChart 中网格饼图的标题

Question

我有一个网格样式饼图（同一网格中的多个饼图），类似于 http://www.zingchart.com/docs/chart-types/pie/#pie__trellis_chart。我使用的代码与该页面上的代码非常相似。

我想在每个饼图上放置一个唯一的标题。例如，如果有 4 个饼图，每个饼图代表一年中的不同季度，那么第一个会说 "Q1"，第二个会说 "Q2," 等等

Answer 1

网格样式饼图不能为每个饼图使用标题 object。这里有两个选项：

A) 坚持使用网格并为您的标题单独使用 positioned/styled 标签：

 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 个饼图的图形集。这样您就可以访问每个馅饼的标题 object。

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 中网格饼图的标题

Title for Trellis Pie Charts in ZingChart

zingchart