当我向 chartjs 添加一个漏斗图时，所有图表都被加载压缩，直到调整页面大小

Question

我一生都无法弄清楚为什么当我将漏斗图添加到我的 chartjs 图表时，所有图表在加载时都会压缩变形。每当我调整页面大小时，图表都会恢复到我期望它们加载的方式。感谢您的帮助。

https://jsfiddle.net/nmp0tfh1/1/

require.config({
  paths: {
    chart: "//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min",
    datalabels: "//cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.3.0/dist/chartjs-plugin-datalabels.min",
    gauge: "//unpkg.com/chartjs-gauge@0.2.0/dist/chartjs-gauge.min",
    funnel: "//cdn.jsdelivr.net/npm/chartjs-funnel@1.0.5/dist/chart.funnel.min"

  },
  map: {
    datalabels: {
      "chart.js": "chart"
    },
    gauge: {
      "chart.js": "chart"
    },
    funnel: {
      "chart.js": "chart"
    },

  }
});


require(["chart", "datalabels", "gauge", "funnel"], function(chart) {
  var ctx = document.getElementById("chart").getContext('2d');
  var chrt = new chart.Chart(ctx, {
    type: 'gauge',
    data: {
      labels: ['Red', 'Yellow', 'Green'],
      datasets: [{
        data: [25, 50, 75],
        value: 55,
        backgroundColor: ['red', 'yellow', 'green'],
        borderWidth: 2
      }]
    },
    options: {
      responsive: true,
      title: {
        display: true,
        text: 'Gauge chart with datalabels plugin displaying labels'
      },
      layout: {
        padding: {
          bottom: 30
        }
      },
      needle: {
        // Needle circle radius as the percentage of the chart area width
        radiusPercentage: 2,
        // Needle width as the percentage of the chart area width
        widthPercentage: 3.2,
        // Needle length as the percentage of the interval between inner radius (0%) and outer radius (100%) of the arc
        lengthPercentage: 80,
        // The color of the needle
        color: 'rgba(0, 0, 0, 1)'
      },
      valueLabel: {
        display: false
      },
      plugins: {
        datalabels: {
          display: true,
          formatter: function(value, context) {
            return context.chart.data.labels[context.dataIndex];
          },
          //color: function (context) {
          //  return context.dataset.backgroundColor;
          //},
          color: 'rgba(0, 0, 0, 1.0)',
          //color: 'rgba(255, 255, 255, 1.0)',
          backgroundColor: null,
          font: {
            size: 20,
            weight: 'bold'
          }
        }
      }
    }
  });
  var ctx = document.getElementById("chart1").getContext('2d');
  var chrt = new chart.Chart(ctx, {
    type: 'pie',
    data: {
      datasets: [{
        data: [30, 60, 90],
        backgroundColor: [
          "#FF6384",
          "#36A2EB",
          "#FFCE56"
        ],
        hoverBackgroundColor: [
          "#FF6384",
          "#36A2EB",
          "#FFCE56"
        ]
      }],
      labels: [
        "Red",
        "Blue",
        "Yellow"
      ],
    },
    options: {
      responsive: true,
      title: {
        display: true,
        text: "chart title"
      },
    },
  });
  var ctx = document.getElementById("chart2").getContext('2d');
  var chrt = new chart.Chart(ctx, {
    type: 'funnel',
    data: {
      datasets: [{
        data: [30, 60, 90],
        backgroundColor: [
          "#FF6384",
          "#36A2EB",
          "#FFCE56"
        ],
        hoverBackgroundColor: [
          "#FF6384",
          "#36A2EB",
          "#FFCE56"
        ]
      }],
      labels: [
        "Red",
        "Blue",
        "Yellow"
      ],
    },
    options: {
      responsive: true,
      title: {
        display: true,
        text: "chart title"
      },
    },
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.js"></script>

<canvas id="chart" width="400" height="400"></canvas>
<canvas id="chart1" width="400" height="400"></canvas>
<canvas id="chart2" width="400" height="400"></canvas>

before resize

after resize

Answer 1

datalabels 插件在您的漏斗图上失败，因为它找不到 x 轴并且无法修复它，因为它不理解该图表，因为它是自定义图表。如果您在漏斗图的选项中将 display 设置为 false，它将起作用。

 options: {
      responsive: true,
      title: {
        display: true,
        text: "chart title"
      },
      plugins: {datalabels: {display: false}}
    },

现场示例：https://codepen.io/leelenaleee/pen/JjbNLpQ