数据可视化清新版【chart.js】学习笔记2.0—项目引入

最新推荐文章于 2023-03-03 15:29:03 发布

LIMI_伞梦

最新推荐文章于 2023-03-03 15:29:03 发布

阅读量710

点赞数 1

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

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

版权

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

47 篇文章 3 订阅

订阅专栏

数据可视化

14 篇文章 4 订阅

订阅专栏

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

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
/*****/
import Chart from 'chart.js'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  /*****/
  Chart,
  /*****/
}).$mount('#app')

步骤3、这样就可以在项目中使用chart.js了，编写一个chart样例：

<template>
    <div class="container">
        <div class="w">
            <canvas id="myChart" width="100" height="100"></canvas>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Chart",
        mounted(){
            this.get();
        },
        data(){
            return{
                date: [12, 19, 20, 5, 2,10]
            }
        },
        methods:{
            get() {
                let ctx = document.getElementById("myChart");
                let myChart = new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
                        datasets: [{
                            label: '# of Votes',
                            data: this.date,
                            backgroundColor: [
                                'rgba(255, 99, 132, 0.5)',
                                'rgba(54, 162, 235, 0.5)',
                                'rgba(255, 206, 86, 0.5)',
                                'rgba(75, 192, 192, 0.5)',
                                'rgba(153, 102, 255, 0.5)',
                                'rgba(255, 159, 64, 0.5)'
                            ],
                            borderColor: [
                                'rgba(255,99,132,1)',
                                'rgba(54, 162, 235, 1)',
                                'rgba(255, 206, 86, 1)',
                                'rgba(75, 192, 192, 1)',
                                'rgba(153, 102, 255, 1)',
                                'rgba(255, 159, 64, 1)'
                            ],
                            borderWidth: 1
                        }]
                    },
                    options: {scales: {yAxes: [{ticks: {beginAtZero:true}}]}}
                });
            },
        }
    }
</script>

<style scoped lang="scss">
    *{
        margin: 0;
        padding: 0;
        list-style: none;
        outline: none;
        .container{
            width: 100%;
            .w{
                margin: 0 auto;
                width: 500px;
            }
        }
    }
</style>

步骤4、效果
在这里插入图片描述

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

LIMI_伞梦

关注

1
点赞
踩
3

收藏

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

博主是在vue-cli3.0项目中配合使用chart.js的，接下来就项目概括一下在项目里安装，也可以参考官网文档：项目中安装获取Chart.js方式步骤步骤1、在项目cmd命令行中运行代码：npm install chart.js --save-dev步骤2、在项目main.js文件中引入进行使用，相关代码：import Vue from 'vue'import App from './App.vue'import router from './router'import store fro
复制链接

扫一扫