数据可视化展示除了静态数据的展示,还有动态数据的实时更新。博主通过阅读chart.js的api,总结了以下两种方法:

方法1、直接更新图表的数据集

this.mydata_1=[7,22,18,24,10,30];//获取新数据
this.myChart.data.datasets[0].data = this.mydata_1;//数据集数据更新
this.myChart.update();//图表更新

方法2、清除原图表,生成新图表

this.myChart.destroy();//原图表清除
this.mydata_1=[7,22,18,24,10,30]//获取新数据
this.get10();//初始化生成新图表

数据更新样例:

1)折线图

1-方法2

JavaScript更新SqlServer数据库 js实时更新数据_数据可视化

<template>
    <div class="container">
        <div class="w" @click="get">
            <canvas id="myChart10" width="100" height="100"></canvas>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Charts",
        data(){
            return {
                myChart: "",
                mydata_1:[30,10,24,18,22,7],
                mydata_2:[23,30,2,12,23,14],
            }
        },
        mounted(){
            this.get10();
        },
        methods:{
            get(){
                this.myChart.destroy();
                this.mydata_1=[7,22,18,24,10,30];
                this.mydata_2=[14,23,12,2,30,23];
                this.get10();
            },
            get10() {
                let ctx = document.getElementById("myChart10");
                this.myChart = new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
                        datasets: [
                            {
                                label: '# of Votes',
                                data: this.mydata_1,
                                fill:false,
                                backgroundColor: 'rgb(0,179,235,0.4)',
                                borderColor: 'rgb(0,179,235)',
                                pointBackgroundColor:'rgb(0,179,235)',
                                borderWidth: 1,
                                order:1,
                            },
                            {
                                label: '# of Votes',
                                data: this.mydata_2,
                                fill:false,
                                backgroundColor: 'rgb(235,69,201,0.4)',
                                borderColor: 'rgb(235,69,201)',
                                pointBackgroundColor:'rgb(235,69,201)',
                                borderWidth: 1,
                                order:1,
                            },
                        ],
                    },
                    options:options,
                });
            },
        }
    }
</script>

2-方法1

JavaScript更新SqlServer数据库 js实时更新数据_javascript_02

<script>
    export default {
        methods:{
            get(){
                this.mydata_1=[7,22,18,24,10,30];
                this.myChart.data.datasets[0].data = this.mydata_1;
                this.mydata_2=[14,23,12,2,30,23];
                this.myChart.data.datasets[1].data = this.mydata_2;
                this.myChart.update();
            },
        }
    }
</script>

2)柱状图

1-方法2

JavaScript更新SqlServer数据库 js实时更新数据_前端_03

<script>
    export default {
        methods:{
            get(){
                this.myChart.destroy();
                this.mydata_1=[7,22,18,24,10,30];
                this.mydata_2=[14,23,12,2,30,23];
                this.get10();
            },
            get10() {
                let ctx = document.getElementById("myChart10");
                this.myChart = new Chart(ctx, {
                    type: 'bar',
                    data: data,
                    options:options,
                });
            },
        }
    }
</script>

2-方法1

JavaScript更新SqlServer数据库 js实时更新数据_数据更新_04

<script>
    export default {
        methods:{
            get(){
                this.mydata_1=[7,22,18,24,10,30];
                this.myChart.data.datasets[0].data = this.mydata_1;
                this.mydata_2=[14,23,12,2,30,23];
                this.myChart.data.datasets[1].data = this.mydata_2;
                this.myChart.update();
            },
        }
    }
</script>

3)雷达图

1-方法2

JavaScript更新SqlServer数据库 js实时更新数据_前端_05

<script>
    export default {
        methods:{
            get(){
                this.myChart.destroy();
                this.mydata_1=[7,22,18,24,10,30];
                this.mydata_2=[14,23,12,2,30,23];
                this.get10();
            },
            get10() {
                let ctx = document.getElementById("myChart10");
                this.myChart = new Chart(ctx, {
                    type: 'radar',
                    data: data,
                    options:options,
                });
            },
        }
    }
</script>

2-方法1

JavaScript更新SqlServer数据库 js实时更新数据_javascript_06

<script>
    export default {
        methods:{
            get(){
                this.mydata_1=[7,22,18,24,10,30];
                this.myChart.data.datasets[0].data = this.mydata_1;
                this.mydata_2=[14,23,12,2,30,23];
                this.myChart.data.datasets[1].data = this.mydata_2;
                this.myChart.update();
            },
        }
    }
</script>