Canvasjs Donut не показывает все метки при перерисовке графика - PullRequest
Новая
       18

Canvasjs Donut не показывает все метки при перерисовке графика

1 голос
/ 11 марта 2019

У меня есть 1 чарт пончик. Когда впервые. Это работает, покажи все. Но я меняю Data call ajax и перерисовываю пончик диаграммы, тогда он не работает, показывает все метки. Показывать только ярлыки маленькие. Помогите мне, пожалуйста 

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

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

Пример изображения

1 Ответ

1 голос
/ 12 марта 2019

indexLabels кажется пропущенным из-за ограниченного пространства, т. Е. Поскольку вы повернули пончик, установив startAngle и установлена ​​ширина, для indexLabel определенного места данных нет места. Изменяя startAngle на несколько значений или увеличивая ширину, можно отобразить больше indexLabels. Вот обновленный код: 

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