Создание красивых графиков с использованием обёрток Vue.js для Chart.js

Основные настройки

Далее нам нужно добавить представление для каждой оболочки. Создайте следующие файлы в src/views :

• VueChartJS.vue
• VueChartKick.vue
• VueCharts.vue

 touch src/views/{VueChartJS.vue,VueChartKick.vue,VueCharts.vue} 

Затем создайте следующие файлы в src/components :

• LineChart.vue
• BarChart.vue
• BubbleChart.vue
• Reactive.vue

 touch src/components/{LineChart.vue,BarChart.vue,BubbleChart.vue,Reactive.vue} 

Они соответствуют типам графиков, которые мы будем использовать.

Наконец, вы можете удалить файл About.vue в src/views , файл HelloWorld.vue в src/components , а также папку assets в src . Мы не будем нуждаться в них.

Содержимое вашего каталога src должно выглядеть так:

 . ├── App.vue ├── components │ ├── BarChart.vue │ ├── BubbleChart.vue │ ├── LineChart.vue │ └── Reactive.vue ├── main.js ├── router.js └── views ├── Home.vue ├── VueChartJS.vue ├── VueChartKick.vue └── VueCharts.vue 

Добавление маршрутов

Следующее, что мы хотим сделать, — это создать различные маршруты, по которым мы можем просматривать графики для каждой из созданных выше оболочек. Нам /chartjs маршрут /charts для отображения диаграмм, созданных с помощью оболочки vue-charts , /chartjs для отображения диаграмм, созданных с vue-chartjs оболочки vue-chartjs , и, наконец, /chartkick для отображения диаграмм, созданных с vue-chartkick оболочки vue-chartkick . Мы также оставим / route на месте для отображения Home view.

Перейдите в папку src приложения и откройте файл router.js . Замените содержимое этого файла следующим:

 import Vue from 'vue' import Router from 'vue-router' import Home from '@/views/Home' import VueChartJS from '@/views/VueChartJS' import VueChartKick from '@/views/VueChartKick' import VueCharts from '@/views/VueCharts' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'Home', component: Home }, { path: '/chartjs', name: 'VueChartJS', component: VueChartJS }, { path: '/chartkick', name: 'VueChartKick', component: VueChartKick }, { path: '/charts', name: 'VueCharts', component: VueCharts } ] }) 

Здесь мы импортировали компоненты Vue, которые мы создали выше. Компоненты являются одной из самых мощных функций Vue. Они помогают нам расширить базовые элементы HTML для инкапсуляции многократно используемого кода. На высоком уровне компоненты являются пользовательскими элементами, к которым компилятор Vue присоединяет поведение.

Наконец, мы определили маршруты и компоненты, которые будут обслуживать разные страницы, которые нам нужны для отображения разных графиков.

Добавление навигации

Мы можем определить нашу навигацию для использования между компонентами в src/App.vue . Мы также добавим некоторые основные стили:

 <template> <div id="app"> <div id="nav"> <ul> <li><router-link to="/">Home</router-link></li> <li><router-link to="/chartjs">vue-chartjs</router-link></li> <li><router-link to="/charts">vue-charts</router-link></li> <li><router-link to="/chartkick">vue-chartkick</router-link></li> </ul> </div> <router-view /> </div> </template> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; } #nav { padding: 30px; height: 90px; } #nav a { font-weight: bold; color: #2c3e50; text-decoration: underline; } #nav a.router-link-exact-active { color: #42b983; text-decoration: none; } #nav ul { list-style-type: none; padding: 0; } #nav ul li { display: inline-block; margin: 0 10px; } h1 { font-size: 1.75em; } h2 { line-height: 2.5em; font-size: 1.25em; } </style> 

Здесь нет ничего революционного. Обратите внимание на использование компонента <router-view /> , где мы будем отображать наши представления.

Домашний компонент

Как упоминалось выше, Home компонент служит маршрутом по умолчанию ( / ). Откройте его и замените содержимое блоком кода ниже:

 <template> <section class="hero"> <div class="hero-body"> <div class="container"> <h1>Creating Beautiful Charts Using Vue.js Wrappers For Chart.js</h1> <h2> Read the article on SitePoint: <a href="https://www.sitepoint.com/creating-beautiful-charts-vue-chart-js/"> 
  Создание красивых графиков с использованием обёрток Vue.js для Chart.js 
 </a>
         </ H2>
         <H3>
           Загрузите репо с GitHub:
           <a href="https://github.com/sitepoint-editors/vue-charts">
             https://github.com/sitepoint-editors/vue-charts
           </a>
         </ H3>
       </ DIV>
     </ DIV>
   </ Раздел>
 </ Шаблон>

 <Скрипт>
 экспорт по умолчанию {
   имя: "дом"
 }
 </ Скрипт>

Добавление булмы

Еще одна вещь, прежде чем мы начнем добавлять диаграммы. Давайте добавим в приложение фреймворк Bulma CSS . Это должно сделать вещи проще, когда дело доходит до CSS.

 <link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css" rel="stylesheet"> 

 <script> //Importing Line class from the vue-chartjs wrapper import { Line } from 'vue-chartjs' //Exporting this so it can be used in other components export default { extends: Line, data () { return { datacollection: { //Data to be represented on x-axis labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], datasets: [ { label: 'Data One', backgroundColor: '#f87979', pointBackgroundColor: 'white', borderWidth: 1, pointBorderColor: '#249EBF', //Data to be represented on y-axis data: [40, 20, 30, 50, 90, 10, 20, 40, 50, 70, 90, 100] } ] }, //Chart.js options that controls the appearance of the chart options: { scales: { yAxes: [{ ticks: { beginAtZero: true }, gridLines: { display: true } }], xAxes: [ { gridLines: { display: false } }] }, legend: { display: true }, responsive: true, maintainAspectRatio: false } } }, mounted () { //renderChart function renders the chart with the datacollection and options object. this.renderChart(this.datacollection, this.options) } } </script> 

 <template> <section class="container"> <h1>Demo examples of vue-chartjs</h1> <div class="columns"> <div class="column"> <h3>Line Chart</h3> <line-chart></line-chart> </div> <div class="column"> <h3>Bar Chart</h3> <!--Bar Chart example--> </div> </div> <div class="columns"> <div class="column"> <h3>Bubble Chart</h3> <!--Bubble Chart example--> </div> <div class="column"> <h3>Reactivity - Live update upon change in datasets</h3> <!--Reactivity Line Chart example--> </div> </div> </section> </template> <script> import LineChart from '@/components/LineChart' import BarChart from '@/components/BarChart' import BubbleChart from '@/components/BubbleChart' import Reactive from '@/components/Reactive' export default { name: 'VueChartJS', components: { LineChart, BarChart, BubbleChart, Reactive } } </script> 

 <script> //Importing Bar class from the vue-chartjs wrapper import { Bar } from 'vue-chartjs' //Exporting this so it can be used in other components export default { extends: Bar, data () { return { datacollection: { //Data to be represented on x-axis labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], datasets: [ { label: 'Data One', backgroundColor: '#f87979', pointBackgroundColor: 'white', borderWidth: 1, pointBorderColor: '#249EBF', //Data to be represented on y-axis data: [40, 20, 30, 50, 90, 10, 20, 40, 50, 70, 90, 100] } ] }, //Chart.js options that controls the appearance of the chart options: { scales: { yAxes: [{ ticks: { beginAtZero: true }, gridLines: { display: true } }], xAxes: [ { gridLines: { display: false } }] }, legend: { display: true }, responsive: true, maintainAspectRatio: false } } }, mounted () { //renderChart function renders the chart with the datacollection and options object. this.renderChart(this.datacollection, this.options) } } </script> 

 <script> //Importing Bubble class from the vue-chartjs wrapper import { Bubble } from 'vue-chartjs' //Exporting this so it can be used in other components export default { extends: Bubble, data () { return { datacollection: { //Data to be represented on x-axis labels: ['Data'], datasets: [ { label: 'Data One', backgroundColor: '#f87979', pointBackgroundColor: 'white', borderWidth: 1, pointBorderColor: '#249EBF', //Data to be represented on y-axis data: [ { x: 100, y: 0, r: 10 }, { x: 60, y: 30, r: 20 }, { x: 40, y: 60, r: 25 }, { x: 80, y: 80, r: 50 }, { x: 20, y: 30, r: 25 }, { x: 0, y: 100, r: 5 } ] } ] }, //Chart.js options that controls the appearance of the chart options: { scales: { yAxes: [{ ticks: { beginAtZero: true }, gridLines: { display: true } }], xAxes: [ { gridLines: { display: false } }] }, legend: { display: true }, responsive: true, maintainAspectRatio: false } } }, mounted () { //renderChart function renders the chart with the datacollection and options object. this.renderChart(this.datacollection, this.options) } } </script> 

 <script> //Importing Bar and mixins class from the vue-chartjs wrapper import { Bar, mixins } from 'vue-chartjs' //Getting the reactiveProp mixin from the mixins module. const { reactiveProp } = mixins export default Bar.extend({ mixins: [ reactiveProp ], data () { return { //Chart.js options that control the appearance of the chart options: { scales: { yAxes: [{ ticks: { beginAtZero: true }, gridLines: { display: true } }], xAxes: [ { gridLines: { display: false } }] }, legend: { display: true }, responsive: true, maintainAspectRatio: false } } }, mounted () { // this.chartData is created in the mixin and contains all the data needed to build the chart. this.renderChart(this.chartData, this.options) } }) </script> 

 data () { return { // instantiating datacollection with null datacollection: null } }, created () { //anytime the vue instance is created, call the fillData() function. this.fillData() }, methods: { fillData () { this.datacollection = { // Data for the y-axis of the chart labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], datasets: [ { label: 'Data One', backgroundColor: '#f87979', // Data for the x-axis of the chart data: [this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt()] } ] } }, getRandomInt () { // JS function to generate numbers to be used for the chart return Math.floor(Math.random() * (50 - 5 + 1)) + 5 } } 

 <reactive :chart-data="datacollection"></reactive> <button class="button is-primary" @click="fillData()">Randomize</button> 

 data () { return { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], dataset: [65, 59, 80, 81, 56, 55, 40] } } 

 import 'chart.js' import 'hchs-vue-charts' Vue.use(window.VueCharts) 

 <template> <section class="container"> <h1>Demo examples of vue-charts</h1> <div class="columns"> <div class="column"> <h3>Line Chart</h3> <!--Line Chart Example--> </div> <div class="column"> <h3>Bar Chart</h3> <!--Bar Chart Example--> </div> </div> <div class="columns"> <div class="column"> <h3>Radar Chart</h3> <!--Radar Chart Example--> </div> <div class="column"> <h3>Data Binding Line Chart</h3> <!--Data Binding Line Chart Example--> </div> </div> </section> </template> <script> export default { name: 'VueCharts', data () { return { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], dataset: [65, 59, 80, 81, 56, 55, 40] } } } </script> 

 methods: { addData () { this.dataset.push(this.dataentry) this.labels.push(this.datalabel) this.datalabel = '' this.dataentry = '' } } 

 <form @submit.prevent="addData"> <input placeholder="Add a Data" v-model="dataentry"> <input placeholder="Add a Label" v-model="datalabel"> <button type="submit">Submit</button> </form> <chartjs-line :labels="labels" :data="dataset" :bind="true"></chartjs-line> 

 data () { return { chartData: [['Jan', 44], ['Feb', 27], ['Mar', 60], ['Apr', 55], ['May', 37], ['Jun', 40], ['Jul', 69], ['Aug', 33], ['Sept', 76], ['Oct', 90], ['Nov', 34], ['Dec', 22]] } } 

 import Chartkick from 'chartkick' import VueChartkick from 'vue-chartkick' Vue.use(VueChartkick, { Chartkick }) 

 <template> <section class="container"> <h1>Demo examples of vue-chartkick</h1> <div class="columns"> <div class="column"> <h3>Line Chart</h3> <!--Line Chart example--> </div> <div class="column"> <h3>Bar Chart</h3> <!--Bar Chart example--> </div> </div> <div class="columns"> <div class="column"> <h3>Scatter Chart</h3> <!--Scatter chart example--> </div> <div class="column"> <h3>Downloadable Line Chart</h3> <!--Downloadable line chart--> </div> </div> </section> </template> <script> export default { name: 'VueChartKick', data () { return { chartData: [['Jan', 44], ['Feb', 27], ['Mar', 60], ['Apr', 55], ['May', 37], ['Jun', 40], ['Jul', 69], ['Aug', 33], ['Sept', 76], ['Oct', 90], ['Nov', 34], ['Dec', 22]] } } } </script> 

 <line-chart :data="chartData" :download="true"></line-chart>