Question

例如，当我加载页面时，我想在视觉上慢慢显示，而不是只是已经加载的弹出窗口

例如，当我加载此条形图时，一切都显得缓慢，屏幕上的可视化效果很好，我认为它会增加一个很好的效果

这是我的剧本

    <script>
            var department = {{department|safe}};
            var incomplete = {{incomplete|safe}};
            var complete = {{complete|safe}};

            // Return with commas in between
            var numberWithCommas = function (x) {
                return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
            };

            // Chart.defaults.global.elements.rectangle.backgroundColor = '#FF0000';

            var bar_ctx = document.getElementById('bar-chart');
            var bar_chart = new Chart(bar_ctx, {
                type: 'bar',
                data: {
                    labels: department,
                    datasets: [
                    {
                        label: 'incomplete',
                        data: incomplete,
                        backgroundColor: "rgba(55, 160, 225, 0.7)",
                        hoverBackgroundColor: "rgba(55, 160, 225, 0.7)",
                        hoverBorderWidth: 2,
                        hoverBorderColor: 'lightgrey'
                    },
                    {
                        label: 'complete',
                        data: complete,
                        backgroundColor: "rgba(225, 58, 55, 0.7)",
                        hoverBackgroundColor: "rgba(225, 58, 55, 0.7)",
                        hoverBorderWidth: 2,
                        hoverBorderColor: 'lightgrey'
                    },
                    ]
                },
                options: {
                    animation: {
                        duration: 10,
                    },
                    tooltips: {
                        mode: 'label',
                        callbacks: {
                            label: function (tooltipItem, data) {
                                return data.datasets[tooltipItem.datasetIndex].label + ": " + numberWithCommas(tooltipItem.yLabel);
                            }
                        }
                    },
                    scales: {
                        xAxes: [{
                            stacked: true,
                            gridLines: { display: false },
                        }],
                        yAxes: [{
                            stacked: true,
                            ticks: {
                                callback: function (value) { return numberWithCommas(value); },
                            },
                        }],
                    }, // scales
                    legend: { display: true }
                } // options
            }
            );

    </script>

Answer 1

在options对象中，有一个animation参数：

animation: { duration: 10, },

我相信这就是你想要的。

如何让我的chartjs以图形方式显示？

1 个答案: