Skip to content
This repository was archived by the owner on Apr 29, 2020. It is now read-only.

GimmyHchs/vue-charts

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Deprecated Package

🔥 This package is no longer maintain. 🔥

vue-charts Package Quality

Base on Vue2, wrapper for ChartJs.

Render a Chart Easily

  • Single Line
  • Multiple Bar
  • Multiple Mix Chart

Features

  • Single Chart
  • Multiple Chart
  • [Multiple Mix Chart]
  • [Override Datasets]
  • [Override Option]
  • [Pass Json data]
  • [DataBinding & Auto Render]

NPM Package

NPM Package

Install

npm install hchs-vue-charts 

or

yarn add hchs-vue-charts 

Notice

  • vue-charts base on Vue 2
  • vue-charts base on Chart.js 2

How to use --- dist & CDN

1.build a page

 <body> <div id="app"> <chartjs-line></chartjs-line> </div> </body> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script> <script src="js/vue-charts.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.min.js"></script> <script type="text/javascript"> Vue.use(VueCharts); const app = new Vue({ el: '#app', }); </script>

2.Done!

How to use --- Laravel Elixir

1.Checkout your gulpfile.js in your laravel project

 const elixir = require('laravel-elixir'); require('laravel-elixir-vue-2'); /*  |--------------------------------------------------------------------------  | Elixir Asset Management  |--------------------------------------------------------------------------  |  | Elixir provides a clean, fluent API for defining some basic Gulp tasks  | for your Laravel application. By default, we are compiling the Sass  | file for our application, as well as publishing vendor resources.  |  */ elixir(mix => { mix.sass('app.scss') .webpack('app.js'); // we just need to require 'hchs-vue-charts' in this file or somewhere else });

2.open your app.js

 /**  * First we will load all of this project's JavaScript dependencies which  * include Vue and Vue Resource. This gives a great starting point for  * building robust, powerful web applications using Vue and Laravel.  */ //By default the bootstrap file will require('vue'); require('./bootstrap'); // chartjs package require('chart.js'); // vue-charts package require('hchs-vue-charts'); Vue.use(VueCharts); /**  * Next, we will create a fresh Vue application instance and attach it to  * the page. Then, you may begin adding components to this application  * or customize the JavaScript scaffolding to fit your unique needs.  */ Vue.component('example', require('./components/Example.vue')); const app = new Vue({ el: '#app' });

3.run gulp in your laravel project

gulp 

4.modify your wellcome.blade.php or where you want to show the chart

  • give vue root id
  • add line chart component
  • don't forget your script source
<body> <div class="flex-center position-ref full-height"> <div id="app" class="content"> <!--line chart component--> <chartjs-line></chartjs-line> <div class="title m-b-md"> Laravel </div> <div class="links"> <a href="https://laravel.com/docs">Documentation</a> <a href="https://laracasts.com">Laracasts</a> <a href="https://laravel-news.com">News</a> <a href="https://forge.laravel.com">Forge</a> <a href="https://github.com/laravel/laravel">GitHub</a> </div> </div> </div> </body> <!--set script src--> <script src="{{asset('js/app.js')}}"></script>

5.Done

Thanks

@yeknava - Horizontal Bar

About

Base on Vue2.0 wrapper for ChartJs. (Deprecated)

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •