Laravel
Base on Vue2.0 wrapper for ChartJs.
npm install hchs-vue-charts#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
``html
`
2.Done!
dist&CDN Demo
#How to use --- Laravel Elixir
1.Checkout your gulpfile.js in your laravel project
`javascript
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
`javascript
/**
* 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
`html``
5.Done
