https://github.com/bbonnin/vue-morris

VueJS component wrapping Morris.js
https://github.com/bbonnin/vue-morris

chart hacktoberfest javascript vue vuejs

Last synced: 2 months ago
JSON representation

VueJS component wrapping Morris.js

• Host: GitHub
• URL: https://github.com/bbonnin/vue-morris
• Owner: bbonnin
• License: mit
• Created: 2017-01-06T09:38:27.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2022-12-10T16:40:11.000Z (about 2 years ago)
• Last Synced: 2024-10-28T22:13:15.892Z (2 months ago)
• Topics: chart, hacktoberfest, javascript, vue, vuejs
• Language: JavaScript
• Homepage:
• Size: 1.77 MB
• Stars: 235
• Watchers: 14
• Forks: 36
• Open Issues: 23
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-github-vue - vue-morris - Vuejs组件封装Morrisjs库 (UI组件)
• awesome-github-vue - vue-morris - Vuejs组件封装Morrisjs库 (UI组件)
• awesome - vue-morris - Vuejs组件封装Morrisjs库 (UI组件)
• awesome-vue - vue-morris - morris?style=social) - Vuejs组件封装Morrisjs库 (UI组件)

README

        
# vue-morris

> Vue.js components wrapping Morris.js lib

> 

> See http://morrisjs.github.io/morris.js/ for documentation

> Depends on Vue.js v2.1.0+

 

## Install

Use npm

```bash

npm install vue-morris --save

```

Do not forget to declare jQuery in your `package.json` and, if you are using Webpack, you should have something like that in your `webpack.config.js` 

```javascript

resolve: {

    alias: {

      'vue$': 'vue/dist/vue.common.js',

      'jquery': 'jquery/src/jquery.js'

    }

  },

```

## Examples

For a complete example, see files in `examples` directory or the project: https://github.com/bbonnin/vue-morris-example.

* Import the component

```javascript

// Do not forget to import raphael

import Raphael from 'raphael/raphael'

global.Raphael = Raphael

import Vue from 'vue'

import { DonutChart } from 'vue-morris'

new Vue({

  el: '#app',

  data: {

    donutData: [

      { label: 'Red', value: 300 },

      { label: 'Blue', value: 50 },

      { label: 'Yellow', value: 100 }

    ],

    components: {

    DonutChart, BarChart, LineChart, AreaChart

  }

})

```

* Use the component in html

```html

```

* Bar chart

![bar chart](img/barchart.png)

* Line chart

![line chart](img/linechart.png)

* Area chart

![area chart](img/areachart.png)

* Donut chart

![donut chart](img/donutchart.png)

## Build Setup

``` bash

# install dependencies

npm install

# serve with hot reload at localhost:8080

npm run dev

# build for production with minification

npm run build

```