首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >Canvasjs Doughnut在重新绘制图表时不显示所有标签

Canvasjs Doughnut在重新绘制图表时不显示所有标签
EN

Stack Overflow用户
提问于 2019-03-11 12:31:45
回答 1查看 197关注 0票数 1

我有一个图表甜甜圈。第一次的时候。这是工作中的全部。但是我更改了数据,调用了ajax,然后重新绘制了图表甜甜圈,然后它就不能显示所有标签了。只显示小标签。请帮帮我

代码语言:javascript
运行
复制
<script type="text/javascript">
window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer", {
         title:{
      text: "indexLabel wrap in doughnut",
        fontSize: 20,
      },
        animationEnabled: true,
      data: [
      {        
        type: "doughnut",
         startAngle: 270,
         innerRadius: 80,
        indexLabel: " #percent %",
        indexLabelFontColor : "black",
        indexLabelPlacement: "outside", 
        indexLabelWrap: true ,
        dataPoints: [
          {  y: 280, label : "some label" },          
          { y: 148,label : "other label" },
          {  y: 16, label : "some other label"},
          {  y: 32, label : "label" }  ,
           {  y: 12, label : "label" }  
        ]
      }
      ]
    });
    chart.render();
}
</script>
代码语言:javascript
运行
复制
<html>
<head>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 460px; width: 460px"></div>
</body>
</html>

Image example

EN

回答 1

Stack Overflow用户

发布于 2019-03-12 17:06:59

由于空间限制,indexLabels似乎被跳过了,也就是说,当您通过设置startAngle和width来旋转甜甜圈时,特定数据点的indexLabel将没有空间。通过将startAngle更改几个值或增加宽度,可以显示更多的indexLabels。以下是更新后的代码:

代码语言:javascript
运行
复制
var chart = new CanvasJS.Chart("chartContainer", {
  title:{
    text: "indexLabel wrap in doughnut",
    fontSize: 20,
  },
  animationEnabled: true,
  data: [
    {        
      type: "doughnut",
      startAngle: 320,
      innerRadius: 80,
      indexLabel: " #percent %",
      indexLabelFontColor : "black",
      indexLabelPlacement: "outside", 
      indexLabelWrap: true ,
      dataPoints: [
        {  y: 280, label : "some label" },          
        { y: 148,label : "other label" },
        {  y: 16, label : "some other label"},
        {  y: 32, label : "label" }  ,
        {  y: 12, label : "label" }  
      ]
    }
  ]
});
chart.render();
代码语言:javascript
运行
复制
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 460px; width: 460px;"></div>

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/55095261

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档