Laravel
Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hchstera/vue-charts
Base on Vue2.0 wrapper for ChartJs. (Deprecated)
https://github.com/hchstera/vue-charts
Last synced: about 23 hours ago
JSON representation
Base on Vue2.0 wrapper for ChartJs. (Deprecated)
- Host: GitHub
- URL: https://github.com/hchstera/vue-charts
- Owner: GimmyHchs
- License: mit
- Archived: true
- Created: 2016-10-12T08:02:20.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2020-04-29T02:16:31.000Z (over 4 years ago)
- Last Synced: 2024-10-29T10:45:17.654Z (7 days ago)
- Language: Vue
- Homepage:
- Size: 480 KB
- Stars: 357
- Watchers: 24
- Forks: 84
- Open Issues: 33
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-github-vue - vue-charts - 轻松渲染一个图表 (UI组件)
- awesome - vue-charts - 轻松渲染一个图表 (UI组件)
README
# Deprecated Package
:fire: This package is no longer maintain. :fire:
# vue-charts [](http://packagequality.com/#?package=hchs-vue-charts)
Base on **Vue2**, wrapper for **ChartJs**.
- [Vue js](https://vuejs.org/)
- [Chart js](http://www.chartjs.org/)
- Work well with [Laravel](https://laravel.com/)
# 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](https://www.npmjs.com/package/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
Vue.use(VueCharts);
const app = new Vue({
el: '#app',
});
```
2.Done!
# 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
# Thanks
[@yeknava](https://github.com/yeknava) - Horizontal Bar