Question

我有1个图表甜甜圈。第一次的时候。一切正常。但是我更改了数据调用ajax并重新绘制了图表甜甜圈，然后显示所有标签都无法正常工作。只显示小标签。请帮助我

public class BMI {
    private double height;
    private double weight;
    private String name;
    private double bmi;

    public BMI(String name, double height, double weight){
        this.name = name;
        this.height = height;
        this.weight = weight;
        this.bmi = weight/(height*height);
    }

    public double getBMI(){
         return bmi;
    }
    @Override
    public String toString(){
         return name + " is " + height + "m tall and is " + weight + "Kg and has a BMI of " + bmi + "Kg/m^2";
    }
}

<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>

Image example

Answer 1

indexLabels似乎由于空间限制而被跳过，即当您通过设置startAngle旋转了甜甜圈并且设置了width时，特定数据点的indexLabel没有空间。通过将startAngle更改一些值或增加宽度，可以显示更多indexLabel。这是更新的代码：

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

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 460px; width: 460px;"></div>

重新绘制图表时，Canvasjs Donut不会显示所有标签

1 个答案: