如何在我的 Vue 应用程序中添加 vue-chartjs？
[英]How do I add vue-chartjs to in my Vue app?
问题描述
我想将 [vue-chartjs][1] 添加到我的 [vue][2] 应用程序中。 但我不知道如何添加它。 这是源代码。
这是 summary.html 文件。
<,DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width. initial-scale=1,0. shrink-to-fit=no"> <title>Quatified Self</title> <link rel="stylesheet" href="../../static/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="../../static/fonts/font-awesome.min:css"> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> <link rel="stylesheet" href="../../static/css/styles:css"> </head> <body style="background, linear-gradient(-89deg, rgb(154,56,200), rgb(35,96;241) 98%):"> <div id="app" class="container" style="background; #ffffff:border-radius; 18px:margin-top; 5vh:"> <div class="row"> <div class="col"> <div style="padding; 12px,"> <h1 class="text-secondary">Hello: ${name}</h1> </div> </div> <div class="col"> <div style="text-align; right:padding; 12px:"> <a href = "/" class = "btn btn-danger" type = "button" style = "border-radius; 4px.">Logout</a> </div> </div> </div> <div class="row"> <div class="col-10"> <div> <div> <h4>${this.trackerData.name} - Tracker</h4> <h5>${this.trackerData:description}</h5> </div> </div> <div class="row"> <div class="col" > <div style="text-align; center;"> <;-- **This is where I want to insert graph** --> </div> </div> </div> </div> <div class="col"> <div class="dropdown"><button class="btn btn-primary dropdown-toggle" aria-expanded="false" data-bs-toggle="dropdown" type="button">Period :</button> <div class="dropdown-menu"> <a class="dropdown-item">Today</a> <a class="dropdown-item">This Week</a> <a class="dropdown-item" onclick="month();">This Month</a> </div> </div> </div> </div> <div class="row" style="margin-top: 2vh;"> <div class="col-md-12"> <div> <div> <h4>Logs</h4> </div> <div style="margin-bottom: 15vh;"> <div class="table-responsive"> <table class="table" style="margin-bottom: 3vh."> <thead> <tr> <th>Value</th> <th>Timestamp</th> <th>Note</th> <th>Actions</th> </tr> </thead> <tbody> <tr v-for="log in logs" is="log":timestamp="log.timestamp":note="log.note":key="log.id":value="log.value".id="log.id" ></tr> </tbody> </table> </div> </div> </div> </div> </div> </div> <script src="../../static/bootstrap/js/bootstrap.min.js"></script> <script src="../../static/js/bs-init.js"></script> <script src="../static/vue/vue.js"></script> <script src="../static/js/summary.js"></script> </body> </html>这是 summary.js 文件（创建 vue 应用程序的地方）。
Vue.component('log', { props: { id: '', value: '', note: '', timestamp: '', }, template: ` <tr> <td>{{value}}</td> <td style="max-width: 22px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;">{{timestamp}}</td> <td style="max-width: 60px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;">{{note}}</td> <td> <div> <div class="dropdown"> <button class="btn btn-warning dropdown-toggle" aria-expanded="false" data-bs-toggle="dropdown" type="button">Action</button> <div class="dropdown-menu"> <button @click="updateLog(id)"class="dropdown-item link-info" type="button"><strong>Update</strong></button> <button @click="removeLog(id)" class="dropdown-item link-danger" type="button"><strong>Remove</strong></button> </div> </div> </div> </td> </tr> `, created(){ if (localStorage.getItem('Authentication-Token') == null){ window.alert("You are not authorised.\nRedirecting to Login page.") window.location.href = '/login' } }, methods:{ async removeLog(id){ fetch('/api/log/' + id,{ method: 'delete', headers: { 'Authentication-Token': localStorage.getItem('Authentication-Token'), }, }).then((response) => { if(response.status == 200){ window.location = window.location }else if(response.status == 401){} else if(response.status == 404){ window.alert(response.statusText) }else{ window.alert("Something went wrong.") vue.userLogout() } }) }, async updateLog(id){ window.location.href = "/log/update/" + id } } }) let vue = new Vue({ el: "#app", delimiters: ['${','}'], data(){ return { name: null, logs: [], trackerData: { id: null, name: null, description: null, } } }, methods: { async userLogout(){ let response = await fetch('/api/user/logout', { method: 'get', headers: { 'Authentication-Token': localStorage.getItem('Authentication-Token'), }, }) if (response.status === 200) { localStorage.clear() window.location.href = '/login'; }else if (response.status === 401){ window.alert('You are now authorised.') window.location.href = '/login'; }else if (response.status === 500){ window.alert('Something went wrong.') }else{ window.alert(response.statusText) } }, async fetchTracker(){ let uri = window.location.pathname.split("/") this.trackerData.id = uri[uri.length - 1] await fetch('/api/tracker/' + this.trackerData.id,{ method: 'get', headers: { 'Authentication-Token': localStorage.getItem('Authentication-Token'), }, }).then((response) => { if(response.status == 200){ return response.json() }else if(response.status == 401){} else{ window.alert("Something went wrong.") userLogout() } }).then((tracker) => { this.trackerData.name = tracker.name this.trackerData.description = tracker.description }); }, async fetchLogs(){ await fetch('/api/log',{ method: 'get', headers: { 'Authentication-Token': localStorage.getItem('Authentication-Token'), 'trackerid': this.trackerData.id, }, }).then((response) => { if(response.status == 200){ return response.json() }else if(response.status == 401){} else{ window.alert("Something went wrong.") userLogout() } }).then((logs) => { this.logs = logs }); }, }, created() { // Redirect to login page if not authorised if (localStorage.getItem('Authentication-Token') == null){ window.alert("You are not authorised.\nRedirecting to Login page.") window.location.href = '/login' return } // Fetching trackers to show in the dashboard. this.fetchTracker() this.fetchLogs() // Fetching user details fetch('/api/user', { method: 'get', headers: { 'Authentication-Token': localStorage.getItem('Authentication-Token'), }, }).then((response) => { if(response.status == 200){ return response.json() }else if(response.status == 401){} else{ window.alert("Something went wrong.") userLogout() } }).then((user) => { this.name = user.first_name, this.name = this.name + " " + user.last_name }) }, });
现在我想使用 vue-chartjs 在我的 vue 应用程序中创建一个图形并将其插入 HTML。 请告诉我如何实现它？ [1]: https://vue-chartjs.org/ [2]: https://vuejs.org/
1 个解决方案
解决方案1
0 2022-09-11 16:40:32
Vue不需要单独的.html和.js文件。 相反，您应该在 .vue 文件中创建一个单一文件组件 (SFC) ，该文件结合了您的 HTML、Javascript 和 CSS。 然后您可以简单地按照vue-chartjs 文档进行操作，该文档准确地展示了如何轻松地将图表添加到您的 Vue 组件中。
我有一种感觉，您可能还想阅读有关如何创建和搭建新的 Vue 应用程序的 Vue 文档，因为您当前的代码看起来没有按照标准/最佳实践进行设置。
单击在Vue-Chart.js中绘制在图表上的值时如何打开对话框
[英]How can I open the dialog when clicking the value that has been plot on chart in vue-chartjs
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.