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

问题描述

我尝试在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,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");

有些标签无法显示，图表变小取决于数据大小。一个小数据，一切看起来都不错，但更多的数据开始变小，图表大小无法响应。如何能够做出响应？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）