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

Question

I can't figure out for the life of me why when I add a funnel chart to my chartjs charts all of the charts become compressed distorted upon loading. Whenever I resize the page the charts snap back to how I would expect them to load. Thanks for the help.

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

The datalabels plugin fails on your funnel chart because it cant find an x axis and cant fix it since it doesnt understand the chart since its a custom chart. If you set display to false in the options for your funnel chart it will work.

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

Live example: https://codepen.io/leelenaleee/pen/JjbNLpQ