chart.js 2.7.1 - 极区图有太多填充答案

【问题标题】：chart.js 2.7.1 - polar area chart has too much paddingchart.js 2.7.1 - 极区图有太多填充
【发布时间】：2018-01-30 16:01:51
【问题描述】：

从 2.7.1 更新时，我发现极地区域图的显示方式发生了一些变化。现在图表的两侧都有很多填充，因此它不再填充放置画布的 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，请注意图表大小（填充）的变化

【问题讨论】：

请发一个Minimal, Complete, and Verifiable example
我添加了一个可作为代码运行的示例 sn-p... 在 2.5.0 和 2.7.1 之间更改 Chart.js 版本可以显示图表大小如何变化。
已解决：显然是由于 2.7 的变化...可以通过使用选项 aspectRatio: 1 来修复
你是怎么把标签从网格中取出来的，我一直在寻找这个解决方案...... thx
极坐标图周围的标签实际上是背景图像...所以它们不是随图表动态创建的（即，我必须分别创建它们，然后为不同的数据设置不同的背景图像套）

标签： chart.js

【解决方案1】：

设置选项 aspectRatio: 1 修复了填充问题。

【讨论】：

【解决方案2】：

您可以将新的 chart.js 更改为旧的“chart.js”版本 2.5。极地战神图将得到正常大小。

【讨论】：