图表 js 加载屏幕

Question

我有一个使用 chartjs 的水平条形图。我可以加载数据，但如何在画布不渲染时显示加载屏幕？我的图表需要大约 10 秒才能渲染。

我试过这个：

onProgress: function(animation) {
    progress.value = animation.animationObject.currentStep / animation.animationObject.numSteps;
},

但我得到了一个错误

进度未定义

这是我在图表上的完整代码

图表js

// global variable of chart unable to destroy it
var myBar;

// function for loading side bar graph over break
function loadGrapHorizontal() {
    var jsonresult = getBreakCnt();

    var labels = jsonresult.map(function (e) {
                    return e.empName;
                 });

    var data = jsonresult.map(function (e) {
                    return e.breakCnt;
               });

    var chartData = {
                    labels: labels,
                    datasets: [{
                        label: 'Break(count) ',
                        backgroundColor: "#619DFF",
                        hoverBackgroundColor: "#F564E3",
                        borderColor: "#619DFF",
                        data: data,
                        yAxisID: 'y0'
                    }]
                };


                if (myBar) myBar.destroy();
                var ctx = document.getElementById("myAreaChart").getContext("2d");
                 myBar = new Chart(ctx, {
                    type: 'horizontalBar',
                    data: chartData,
                    options: {
                        legend: {
                            display: false
                        },
                        //hover: {
                        //    events: ['mousemove'],
                        //    onHover: function (event, chartElement) {
                        //        $("#myAreaChart").css("cursor", e[0] ? "pointer" : "default");
                        //    }
                        //},
                        onClick: function (evt, element) {
                            var activePoints = myBar.getElementAtEvent(evt);
                            $('#<%=hiddenempName.ClientID %>').val(activePoints[0]._model.label);                          
                            gettableData();                           
                        },

                        scales: {
                            yAxes: [{
                                id: "y0",


                                weight: 0,
                                position: "left",
                                type: 'category',
                                display: true,
                                gridLines: {
                                    display: false
                                },
                                ticks: {
                                    display: true,
                                    fontStyle: 'bold',
                                    fontSize: 8
                                }
                            }, {
                                id: "y1",
                                position: "right",
                                type: 'category',

                                ticks: {
                                    display: false,
                                    padding: 0
                                },
                                gridLines: {
                                    display: false
                                }
                            }, ],
                            xAxes: [{
                                id: "x1",
                                ticks: {
                                    beginAtZero: true
                                }
                            }],
                        },

                        animation: {
                            duration: 0,
                            onProgress: function(animation) {
                                progress.value = animation.animationObject.currentStep / animation.animationObject.numSteps;
                            },
                            onComplete: function () {
                                var chartInstance = this.chart;
                                ctx.font = Chart.helpers.fontString(5, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
                                ctx.fillStyle = 'red';
                                ctx.textBaseline = "bottom";


                            }
                        }
                    }
                });
            }

关于拉取数据的jQuery

//over break side bar graph

    function getBreakCnt() {
        var counts = {},
            params = { graphcount: $('#txtpagenum').val() }
        $.ajax({

            async: false,
            type: 'POST',
            contentType: 'application/json',
            url: '../Default.aspx/getcountBar',
            data: JSON.stringify(params),
            dataType: 'json',
            success: function (data) { counts = data },
            error: function (xhr, status, error) { console.log(xhr, status, error); }
        });

        return counts.d;
    }

HTML 画布

                        <div class="card mb-4">
                            <div class="card-header">
                                <i class="fas fa-chart-area mr-1"></i>Exeeding 45 Minutes Chart   &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                                  &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                                  &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                                  &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                                  &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp                                 
                             &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                              <button type="button" id="btnReload" class="btn btn-primary btn-sm" style="visibility:hidden"><i class="fas fa-redo-alt"></i></button>

                            </div>
                            <div class="card-body">
                                <canvas id="myAreaChart" width="100" height="70"></canvas>
                            </div>
                            <div class="card-footer">
                                &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                                 &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                                &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                                  &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                                  &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp                                    
                                &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                                &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                                 <label id="lblrownum">Row Count:</label>
                                <input type="text" id="txtpagenum" class="bg-light border-1 small col-sm-1" />
                                <button  id="btngo" type="button"   class="btn btn-primary btn-sm">Genarate</button>
                            </div>
                        </div>

Answer 1

你需要在下面添加这个html

<canvas id="canvas"></canvas>
<progress id="animationProgress" max="1" value="0" style="width: 100%"></progress> // you missed this html
        
var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
        var progress = document.getElementById('animationProgress'); // and missed this
        
      
        var config = {
            type: 'line',
            data: {
                labels: ["January", "February", "March", "April", "May", "June", "July"],
                datasets: []// your dataset
            },
            options: {
                title:{
                    display:true,
                    text: "Progress Bar"
                },
                animation: {
                    duration: 2000,
                    onProgress: function(animation) {
                        //add progress
                        progress.value = animation.currentStep / animation.numSteps;
                    },
                    onComplete: function(animation) {
                        window.setTimeout(function() {
                            progress.value = 0;
                        }, 2000);
                    }
                }
            }
        };

        window.onload = function() {
            var ctx = document.getElementById("canvas").getContext("2d");
            window.myLine = new Chart(ctx, config);
        };