javascript - 将数据动态添加到chartJs响应问题

Question

我试图在 chartjs 条形图中显示一些数据。但是当我动态（很多）获取数据时，chartjs 无法响应操作。我该如何解决？

我的代码如下：

//html canvas :
 <div id="ProductChartsDiv" height="300" style="width:100%; height:300px; ">
     <canvas id="ProductkChart"></canvas>
 </div>

//js chart display code:

 function displayChartData(chartData, dataType, chartCanvasName,chartCanvasDivName)
    {
        $(chartCanvasName).remove();
        chartCanvasName = chartCanvasName.split('#').join('');
        $(chartCanvasDivName).append('<canvas id="' + chartCanvasName + '" ></canvas>');
        ctx = document.getElementById(chartCanvasName);
        var mylabels = [];
        var valuesdatas = [];
        var mybackgroundColors = [];
        var myborderColors = [];
        ctx.height = 400;
        var myLineChart = new Chart(ctx, { options: { responsive: true, maintainAspectRatio: false} });
       // myLineChart.clear();
        myLineChart.destroy();


        var randRgbaColor = random_rgba();
        for (var data in chartData)
        {
            if (dataType == "elementB") {
                mybackgroundColors.push("#3e95cd");
                myborderColors.push("#3e95cd");
                
                mylabels.push(chartData[data].ProductionElementB);
                valuesdatas.push(chartData[data].productionPointB);
            }
            else if (dataType == "elementA")
            {
                mybackgroundColors.push("#3e95cd");
                myborderColors.push("#3e95cd");
                mylabels.push(chartData[data].ProductionElementA);
                valuesdatas.push(chartData[data].productionPointA);
            }


        }

        myLineChart = new Chart(ctx,
            {
                type: 'bar',
                data: {
                    labels: mylabels,
                    datasets: [
                        {
                        label: dataType+ " Production",
                        data: valuesdatas,
                        backgroundColor: mybackgroundColors,
                        borderColor: myborderColors,
                        hoverBackgroundColor: "rgba(255,99,132,0.4)",
                        hoverBorderColor: "rgba(255,99,132,1)",
                        borderWidth: 1
                        }


                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales:
                    {
                        yAxes: [
                            {
                                ticks: {
                                    steps: 2,
                                    max: 200,
                                    min:0
                                }
                            }
                        ]
                    },
                    title: {
                        display: true,
                        text: ' '
                    }
                }

            });

        myLineChart.update();

    }


//sample call function :

   displayChartData(data.prodcutionList, "elementA", "#ProductkChart", "#ProductChartsDiv");

一些标签无法显示，图表更小取决于数据大小是否更大。小数据，一切看起来都不错，但更多数据开始变小，图表大小无法响应。怎么可能反应灵敏？