Question

从2.7.1更新时，我发现Polar Area Chart已经改变了它的显示方式。现在图表的两边都有很多填充，因此它不再填充画布放置的div。

我使用2.5.0和2.7.1获得了相同输出的屏幕截图

除了正在使用的chart.js版本之外的所有内容在两个屏幕截图中都是相同的。

有没有办法解决这个问题，以便我可以保持最新的2.7.1并获得我想要的输出，因为它看起来使用2.5.0？

谢谢，斯科特

以下是输出的示例：

//helpers = Chart.helpers;
var trimergencePolarData = {
  datasets: [{
    data: [
      41,
      38,
      35
    ],
    backgroundColor: [
      "rgba(103, 182, 93,.75)",
      "rgba(182, 87, 56,.75)",
      "rgba(83, 134, 155,.75)"
    ],
    hoverBackgroundColor: [
      "rgba(103, 182, 93,1)",
      "rgba(182, 87, 56,1)",
      "rgba(83, 134, 155,1)"
    ]
  }],
  labels: [
    "Intuition",
    "Emotion",
    "Logic"
  ],
  relativeLevel: [
    "Primary",
    "Secondary",
    "Tertiary"
  ],
  activation: [
    "Higher",
    "Higher",
    "Middle"
  ]
};

window.onload = function() {
  var ctx = document.getElementById("polar_chartjs").getContext("2d");
  var mytrimergencePolarArea = new Chart(ctx, {
    data: trimergencePolarData,
    type: "polarArea",
    options: {
      startAngle: Math.PI * 1.166666666667,
      layout: {
        padding: 18
      },
      elements: {
        arc: {
          //borderColor: "#000000"
        }
      },
      scale: {
        ticks: {
          min: 5,
          max: 50,
          stepSize: 5,
          display: false
        }
      },
      animation: {
        duration: 1000,
        easing: "easeOutQuad",
        onComplete: function() {
          var imgBlob = mytrimergencePolarArea.toBase64Image();
          //console.log(imgBlob);
          //document.body.appendChild(imgBlob);
          data = {
            "taking_id": 15,
            "action": "trimergence_store_image",
            "img_type": "polar_chart",
            "imgdata": imgBlob
          }
          jQuery.post("https://trimergprogrms.wpengine.com/wp-admin/admin-ajax.php", data, function(msg) {
            // do nothing for now
          });
          //});
        }
      },
      legend: {
        display: false
      },
      tooltips: {
        backgroundColor: "rgba(0,0,0,.6)",
        bodyFontColor: "rgb(255,255,255)"

      }


    }

  });


};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<canvas id="polar_chartjs"></canvas>

如果将Chart.js的版本从2.7.1更改为2.5.0，请注意图表大小（填充）的更改

Answer 1

设置选项AspectRatio：1修复了填充问题。

Answer 2

您可以将新的 chart.js 更改为旧的 'chart.js' 2.5 版。极地战神图将变为正常大小。

chart.js 2.7.1 - 极区图表填充太多

2 个答案: