当前位置:  开发笔记 > 编程语言 > 正文

ZingChart格子饼图的标题

如何解决《ZingChart格子饼图的标题》经验,为你挑选了1个好方法。

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

我想在每个饼图上添加一个独特的标题.例如,如果有4个饼图,每个饼代表一年中的不同季度,那么第一个将表示"Q1",第二个表示"Q2"等.



1> RockinSocks..:

格子样式饼图不能使用每个饼的标题对象.这里有两个选项:

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
});

推荐阅读
落单鸟人
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有