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

问题描述

我终生无法弄清楚为什么当我将漏斗图添加到我的 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,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,1.0)',//color: 'rgba(255,255,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","#FFCE56"
        ]
      }],labels: [
        "Red","Blue","Yellow"
      ],},text: "chart title"
      },});
  var ctx = document.getElementById("chart2").getContext('2d');
  var chrt = new chart.Chart(ctx,{
    type: 'funnel',});
});

<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

解决方法

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

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

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