数据可视化清新版【chart.js】学习笔记14.0—数据更新

最新推荐文章于 2023-10-10 17:37:21 发布

LIMI_伞梦

最新推荐文章于 2023-10-10 17:37:21 发布

阅读量857

点赞数 3

分类专栏：数据可视化前端编程文章标签：数据可视化 javascript 前端

本文链接：https://blog.csdn.net/qq_36288559/article/details/112556650

版权

前端编程同时被 2 个专栏收录

47 篇文章 3 订阅

订阅专栏

数据可视化

14 篇文章 4 订阅

订阅专栏

数据可视化清新版【chart.js】学习笔记

数据可视化展示除了静态数据的展示，还有动态数据的实时更新。博主通过阅读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
在这里插入图片描述

<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 在这里插入图片描述

<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 在这里插入图片描述

<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 在这里插入图片描述

<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
在这里插入图片描述

<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 在这里插入图片描述

<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>

数据可视化清新版【chart.js】学习笔记

LIMI_伞梦

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
数据可视化清新版【chart.js】学习笔记14.0—数据更新

数据可视化展示除了静态数据的展示，还有动态数据的实时更新。博主通过阅读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();//原图表清除thi
复制链接

扫一扫