├── .babelrc ├── src ├── build.js └── VueChart.js ├── .editorconfig ├── .gitignore ├── webpack.config.js ├── webpack.common.js ├── LICENSE ├── package.json ├── README.md └── dist └── vue-chart.common.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015"], 3 | "plugins": ["transform-runtime"] 4 | } -------------------------------------------------------------------------------- /src/build.js: -------------------------------------------------------------------------------- 1 | import VueChartComponent from './VueChart' 2 | 3 | export function install(Vue) { 4 | Vue.component('vue-chart', VueChartComponent) 5 | } 6 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | 6 | # Runtime data 7 | pids 8 | *.pid 9 | *.seed 10 | 11 | # Directory for instrumented libs generated by jscoverage/JSCover 12 | lib-cov 13 | 14 | # Coverage directory used by tools like istanbul 15 | coverage 16 | 17 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 18 | .grunt 19 | 20 | # node-waf configuration 21 | .lock-wscript 22 | 23 | # Compiled binary addons (http://nodejs.org/api/addons.html) 24 | build/Release 25 | 26 | # Dependency directory 27 | node_modules 28 | 29 | # Optional npm cache directory 30 | .npm 31 | 32 | # Optional REPL history 33 | .node_repl_history 34 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var webpack = require('webpack'); 2 | var version = require("./package.json").version; 3 | var banner = 4 | "/**\n" + 5 | " * vue-chart v" + version + "\n" + 6 | " * https://github.com/miaolz123/vue-chart\n" + 7 | " * MIT License\n" + 8 | " */\n"; 9 | 10 | module.exports = { 11 | entry: './src/build.js', 12 | output: { 13 | path: './dist', 14 | filename: 'vue-chart.js', 15 | library: 'VueChart', 16 | libraryTarget: 'umd' 17 | }, 18 | plugins: [ 19 | new webpack.BannerPlugin(banner, { raw: true }) 20 | ], 21 | module: { 22 | loaders: [{ 23 | test: /\.vue$/, 24 | loader: 'vue' 25 | }, { 26 | test: /\.css$/, 27 | loader: "style!css" 28 | }, { 29 | test: /\.js$/, 30 | loader: 'babel', 31 | exclude: /node_modules/ 32 | }, { 33 | test: /\.json$/, 34 | loader: 'json-loader' 35 | }] 36 | }, 37 | } 38 | -------------------------------------------------------------------------------- /webpack.common.js: -------------------------------------------------------------------------------- 1 | var webpack = require("webpack"); 2 | var version = require("./package.json").version; 3 | var banner = 4 | "/**\n" + 5 | " * vue-chart v" + version + "\n" + 6 | " * https://github.com/miaolz123/vue-chart\n" + 7 | " * MIT License\n" + 8 | " */\n"; 9 | 10 | module.exports = { 11 | entry: "./src/VueChart.js", 12 | target: "node", 13 | output: { 14 | path: "./dist", 15 | filename: "vue-chart.common.js", 16 | library: "VueChart", 17 | libraryTarget: "umd" 18 | }, 19 | externals: /^[^.]/, 20 | plugins: [ 21 | new webpack.BannerPlugin(banner, { raw: true }) 22 | ], 23 | module: { 24 | loaders: [{ 25 | test: /\.vue$/, 26 | loader: "vue" 27 | }, { 28 | test: /\.js$/, 29 | loader: "babel", 30 | exclude: /node_modules/ 31 | }, { 32 | test: /\.css$/, 33 | loader: "style!css" 34 | }, { 35 | test: /\.json$/, 36 | loader: "json-loader" 37 | }] 38 | }, 39 | } 40 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Chao Lee 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/VueChart.js: -------------------------------------------------------------------------------- 1 | import Chart from 'chart.js' 2 | import assign from 'lodash.assign' 3 | 4 | export default { 5 | template: '', 6 | props: { 7 | type: { 8 | type: String, 9 | default: 'line', 10 | }, 11 | data: { 12 | type: Object, 13 | default: () => ({ 14 | labels: [], 15 | datasets: [], 16 | }), 17 | }, 18 | options: { 19 | type: Object, 20 | }, 21 | }, 22 | data: () => ({ 23 | chart: null, 24 | }), 25 | mounted() { 26 | this.chart = new Chart(this.$el, { 27 | type: this.type, 28 | data: this.data, 29 | options: this.options, 30 | }) 31 | this.$watch('data', () => { 32 | if (this.data.datasets && this.data.datasets.length > 0) { 33 | this.data.datasets.map((dataset, i) => { 34 | if (i === this.chart.config.data.datasets.length) return 35 | this.data.datasets[i] = assign(this.chart.config.data.datasets[i], dataset) 36 | }) 37 | } 38 | this.chart.config.data = assign(this.chart.config.data, this.data) 39 | this.$nextTick(() => { 40 | this.chart.update() 41 | }) 42 | }) 43 | this.$watch('options', () => { 44 | this.chart.config.options = assign(this.chart.config.options, this.options) 45 | this.$nextTick(() => { 46 | this.chart.update() 47 | }) 48 | }) 49 | }, 50 | } 51 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-chart", 3 | "version": "2.0.0", 4 | "description": "A Powerful and Highspeed Markdown Parser for Vue", 5 | "main": "dist/vue-chart.common.js", 6 | "files": [ 7 | "dist/vue-chart.js", 8 | "dist/vue-chart.min.js", 9 | "dist/vue-chart.common.js", 10 | "src" 11 | ], 12 | "scripts": { 13 | "start": "webpack --config webpack.config.js", 14 | "min": "uglifyjs ./dist/vue-chart.js -m -c --noerr -o ./dist/vue-chart.min.js", 15 | "build": "webpack --config webpack.common.js", 16 | "test": "echo true" 17 | }, 18 | "repository": { 19 | "type": "git", 20 | "url": "git+https://github.com/miaolz123/vue-chart.git" 21 | }, 22 | "keywords": [ 23 | "vue", 24 | "chart", 25 | "vue-chart" 26 | ], 27 | "author": "miaolz123", 28 | "license": "MIT", 29 | "bugs": { 30 | "url": "https://github.com/miaolz123/vue-chart/issues" 31 | }, 32 | "homepage": "https://github.com/miaolz123/vue-chart#readme", 33 | "devDependencies": { 34 | "babel-core": "^6.8.0", 35 | "babel-loader": "^6.2.4", 36 | "babel-plugin-transform-es2015-parameters": "^6.8.0", 37 | "babel-plugin-transform-runtime": "^6.8.0", 38 | "babel-preset-es2015": "^6.6.0", 39 | "babel-runtime": "^6.6.1", 40 | "css-loader": "^0.23.1", 41 | "json-loader": "^0.5.4", 42 | "style-loader": "^0.13.1", 43 | "vue-loader": "^8.3.1", 44 | "webpack": "^1.13.0" 45 | }, 46 | "dependencies": { 47 | "chart.js": "^2.1.6", 48 | "lodash.assign": "^4.0.9" 49 | } 50 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-chart 2 | 3 | [![npm](https://img.shields.io/npm/v/vue-chart.svg?style=flat)](https://www.npmjs.com/package/vue-chart) 4 | [![npm](https://img.shields.io/npm/l/vue-chart.svg?style=flat)](https://www.npmjs.com/package/vue-chart) 5 | [![npm](https://img.shields.io/npm/dt/vue-chart.svg?style=flat)](https://www.npmjs.com/package/vue-chart) 6 | 7 | A Powerful and Highspeed Chart Parser for Vue. 8 | 9 | - **version 1.X.X for vue1.X.X** 10 | - **version 2.X.X for vue2.X.X** 11 | 12 | # Example 13 | 14 | [DEMO](https://miaolz123.github.io/vue-chart/) | [CODE](https://github.com/miaolz123/vue-chart/tree/gh-pages) 15 | 16 | # Installation 17 | 18 | ### Browser globals 19 | 20 | > The **dist** folder contains `vue-chart.js` and `vue-chart.min.js` with the component exported in the `window.VueChart` object. 21 | 22 | ```html 23 | 24 | 25 | 26 | 27 | 28 | 36 | ``` 37 | 38 | ## CommonJS 39 | 40 | ```js 41 | var VueChart = require('vue-chart'); 42 | 43 | new Vue({ 44 | components: { 45 | 'vue-chart': VueChart 46 | } 47 | }) 48 | ``` 49 | 50 | ## js 51 | 52 | ```js 53 | // 54 | 55 | new Vue({ 56 | components: { 57 | VueChart 58 | } 59 | }) 60 | ``` 61 | 62 | ## ES6 63 | 64 | ```js 65 | import VueChart from 'vue-chart' 66 | 67 | new Vue({ 68 | components: { 69 | VueChart 70 | } 71 | }) 72 | ``` 73 | 74 | # Props 75 | 76 | | Prop | Type | Default | 77 | | ---- | ---- | ------- | 78 | | type | String | `type="line"` | 79 | | data | Object | [DOCS](http://www.chartjs.org/docs/#line-chart-data-structure) | 80 | | options | Object | [DOCS](http://www.chartjs.org/docs/#chart-configuration) | 81 | 82 | 83 | ## Todo 84 | 85 | | Done | Prop | Type | Required | Description | 86 | | ---- | ---- | ---- | -------- | ----------- | 87 | | No | type | String | no | default is `line` | 88 | | No | datasets | Array[object] | yes | Chart.data.datasets | 89 | | No | labels | Array[String] | yes | Chart.data.labels | 90 | | No | xLabels | Array[String] | no | Chart.data.xLabels | 91 | | No | yLabels | Array[String] | no | Chart.data.yLabels | 92 | | No | common | Object | no | [Common Chart Configuration](http://www.chartjs.org/docs/#chart-configuration-common-chart-configuration) | 93 | | No | title | Object | no | [Title Configuration](http://www.chartjs.org/docs/#chart-configuration-title-configuration) | 94 | | No | legend | Object | no | [Legend Configuration](http://www.chartjs.org/docs/#chart-configuration-legend-configuration) | 95 | | No | tooltip | Object | no | [Tooltip Configuration](http://www.chartjs.org/docs/#chart-configuration-tooltip-configuration) | 96 | | No | hover | Object | no | [Hover Configuration](http://www.chartjs.org/docs/#chart-configuration-hover-configuration) | 97 | | No | animation | Object | no | [Animation Configuration](http://www.chartjs.org/docs/#chart-configuration-animation-configuration) | 98 | | No | element | Object | no | [Element Configuration](http://www.chartjs.org/docs/#chart-configuration-element-configuration) | 99 | 100 | 101 | # Thanks 102 | 103 | - [ChartJS](http://www.chartjs.org) 104 | - [Johnny](https://github.com/johnnyGoo) 105 | - [Rob Laverty](https://github.com/roblav96) 106 | - [**rockymontana**](https://github.com/rockymontana) 107 | 108 | 109 | 110 | 111 | # License 112 | 113 | Copyright (c) 2016 [vue-chart](https://github.com/miaolz123/vue-chart) by [MIT](https://opensource.org/licenses/MIT) 114 | -------------------------------------------------------------------------------- /dist/vue-chart.common.js: -------------------------------------------------------------------------------- 1 | /** 2 | * vue-chart v2.0.0 3 | * https://github.com/miaolz123/vue-chart 4 | * MIT License 5 | */ 6 | 7 | (function webpackUniversalModuleDefinition(root, factory) { 8 | if(typeof exports === 'object' && typeof module === 'object') 9 | module.exports = factory(require("chart.js"), require("lodash.assign")); 10 | else if(typeof define === 'function' && define.amd) 11 | define(["chart.js", "lodash.assign"], factory); 12 | else if(typeof exports === 'object') 13 | exports["VueChart"] = factory(require("chart.js"), require("lodash.assign")); 14 | else 15 | root["VueChart"] = factory(root["chart.js"], root["lodash.assign"]); 16 | })(this, function(__WEBPACK_EXTERNAL_MODULE_1__, __WEBPACK_EXTERNAL_MODULE_2__) { 17 | return /******/ (function(modules) { // webpackBootstrap 18 | /******/ // The module cache 19 | /******/ var installedModules = {}; 20 | 21 | /******/ // The require function 22 | /******/ function __webpack_require__(moduleId) { 23 | 24 | /******/ // Check if module is in cache 25 | /******/ if(installedModules[moduleId]) 26 | /******/ return installedModules[moduleId].exports; 27 | 28 | /******/ // Create a new module (and put it into the cache) 29 | /******/ var module = installedModules[moduleId] = { 30 | /******/ exports: {}, 31 | /******/ id: moduleId, 32 | /******/ loaded: false 33 | /******/ }; 34 | 35 | /******/ // Execute the module function 36 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 37 | 38 | /******/ // Flag the module as loaded 39 | /******/ module.loaded = true; 40 | 41 | /******/ // Return the exports of the module 42 | /******/ return module.exports; 43 | /******/ } 44 | 45 | 46 | /******/ // expose the modules object (__webpack_modules__) 47 | /******/ __webpack_require__.m = modules; 48 | 49 | /******/ // expose the module cache 50 | /******/ __webpack_require__.c = installedModules; 51 | 52 | /******/ // __webpack_public_path__ 53 | /******/ __webpack_require__.p = ""; 54 | 55 | /******/ // Load entry module and return exports 56 | /******/ return __webpack_require__(0); 57 | /******/ }) 58 | /************************************************************************/ 59 | /******/ ([ 60 | /* 0 */ 61 | /***/ function(module, exports, __webpack_require__) { 62 | 63 | 'use strict'; 64 | 65 | Object.defineProperty(exports, "__esModule", { 66 | value: true 67 | }); 68 | 69 | var _chart = __webpack_require__(1); 70 | 71 | var _chart2 = _interopRequireDefault(_chart); 72 | 73 | var _lodash = __webpack_require__(2); 74 | 75 | var _lodash2 = _interopRequireDefault(_lodash); 76 | 77 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 78 | 79 | exports.default = { 80 | template: '', 81 | props: { 82 | type: { 83 | type: String, 84 | default: 'line' 85 | }, 86 | data: { 87 | type: Object, 88 | default: function _default() { 89 | return { 90 | labels: [], 91 | datasets: [] 92 | }; 93 | } 94 | }, 95 | options: { 96 | type: Object 97 | } 98 | }, 99 | data: function data() { 100 | return { 101 | chart: null 102 | }; 103 | }, 104 | mounted: function mounted() { 105 | var _this = this; 106 | 107 | this.chart = new _chart2.default(this.$el, { 108 | type: this.type, 109 | data: this.data, 110 | options: this.options 111 | }); 112 | this.$watch('data', function () { 113 | if (_this.data.datasets && _this.data.datasets.length > 0) { 114 | _this.data.datasets.map(function (dataset, i) { 115 | if (i === _this.chart.config.data.datasets.length) return; 116 | _this.data.datasets[i] = (0, _lodash2.default)(_this.chart.config.data.datasets[i], dataset); 117 | }); 118 | } 119 | _this.chart.config.data = (0, _lodash2.default)(_this.chart.config.data, _this.data); 120 | _this.$nextTick(function () { 121 | _this.chart.update(); 122 | }); 123 | }); 124 | this.$watch('options', function () { 125 | _this.chart.config.options = (0, _lodash2.default)(_this.chart.config.options, _this.options); 126 | _this.$nextTick(function () { 127 | _this.chart.update(); 128 | }); 129 | }); 130 | } 131 | }; 132 | 133 | /***/ }, 134 | /* 1 */ 135 | /***/ function(module, exports) { 136 | 137 | module.exports = __WEBPACK_EXTERNAL_MODULE_1__; 138 | 139 | /***/ }, 140 | /* 2 */ 141 | /***/ function(module, exports) { 142 | 143 | module.exports = __WEBPACK_EXTERNAL_MODULE_2__; 144 | 145 | /***/ } 146 | /******/ ]) 147 | }); 148 | ; --------------------------------------------------------------------------------