├── .gitignore ├── src ├── main.js └── highcharts.vue ├── LICENSE ├── package.json ├── dist └── main.js ├── gruntfile.js └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | build 4 | .vscode 5 | *.log 6 | *.rar 7 | *.zip 8 | .svn/* 9 | obj/* 10 | *.bak 11 | config.js 12 | **/env/prod.js 13 | note.txt 14 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | 2 | import Charts from './highcharts.vue' 3 | 4 | const HighChartsPlugin = { 5 | install: function (Vue) { 6 | if (Vue.__highcharts_plugin_installed) { 7 | return; 8 | } 9 | 10 | Vue.__highcharts_plugin_installed = true; 11 | 12 | // Register components 13 | Vue.component('highcharts', Charts); 14 | 15 | // for (var component in components) { 16 | // Vue.component(component, components[component]); 17 | // } 18 | 19 | } 20 | }; 21 | 22 | if (typeof window !== 'undefined' && window.Vue) { 23 | window.Vue.use(HighChartsPlugin); 24 | } 25 | 26 | export default HighChartsPlugin; -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Nasa Nguyen 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 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "v-highcharts", 3 | "version": "1.0.0", 4 | "description": "Highcharts component for Vue.js version >= 2.0", 5 | "main": "src/main.js", 6 | "scripts": { 7 | "build": "grunt", 8 | "b": "grunt", 9 | "dev": "grunt watch" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://gitlab.com/nasa8x/v-highcharts.git" 14 | }, 15 | "keywords": [ 16 | "highcharts", 17 | "chart", 18 | "charts", 19 | "highstock", 20 | "highmaps", 21 | "vue highcharts", 22 | "visualization", 23 | "vue charts", 24 | "line charts", 25 | "area charts", 26 | "bar charts", 27 | "column charts", 28 | "pie charts", 29 | "bubble charts", 30 | "scatter charts", 31 | "stock charts", 32 | "dynamic charts" 33 | 34 | ], 35 | "author": "Nasa8x", 36 | "license": "MIT", 37 | "bugs": { 38 | "url": "https://gitlab.com/nasa8x/v-highcharts/issues" 39 | }, 40 | "homepage": "https://gitlab.com/nasa8x/v-highcharts#README", 41 | "dependencies": { 42 | "highcharts": "^5.0.9" 43 | }, 44 | "devDependencies": { 45 | "babel-core": "*", 46 | "babel-loader": "*", 47 | "babel-plugin-transform-runtime": "*", 48 | "babel-preset-es2015": "*", 49 | "babel-preset-stage-2": "*", 50 | "babel-runtime": "*", 51 | "css-loader": "*", 52 | "file-loader": "*", 53 | "grunt": "*", 54 | "grunt-babel": "*", 55 | "grunt-contrib-clean": "*", 56 | "grunt-contrib-watch": "*", 57 | "grunt-webpack": "*", 58 | "html-loader": "*", 59 | "json-loader": "*", 60 | "node-sass": "*", 61 | "sass-loader": "*", 62 | "style-loader": "*", 63 | "vue-loader": "*", 64 | "vue-template-compiler": "*", 65 | "webpack": "*", 66 | "webpack-node-externals": "*" 67 | }, 68 | "babel": { 69 | "presets": [ 70 | [ 71 | "es2015" 72 | ], 73 | [ 74 | "stage-2" 75 | ] 76 | ] 77 | } 78 | } -------------------------------------------------------------------------------- /src/highcharts.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /dist/main.js: -------------------------------------------------------------------------------- 1 | !function(t){function e(n){if(i[n])return i[n].exports;var r=i[n]={i:n,l:!1,exports:{}};return t[n].call(r.exports,r,r.exports,e),r.l=!0,r.exports}var i={};e.m=t,e.c=i,e.i=function(t){return t},e.d=function(t,i,n){e.o(t,i)||Object.defineProperty(t,i,{configurable:!1,enumerable:!0,get:n})},e.n=function(t){var i=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(i,"a",i),i},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=8)}([function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n=i(2),r=function(t){return t&&t.__esModule?t:{default:t}}(n),o={install:function(t){t.__highcharts_plugin_installed||(t.__highcharts_plugin_installed=!0,t.component("highcharts",r.default))}};"undefined"!=typeof window&&window.Vue&&window.Vue.use(o),e.default=o},function(t,e,i){"use strict";function n(t){return t&&t.__esModule?t:{default:t}}Object.defineProperty(e,"__esModule",{value:!0});var r=i(5),o=n(r),u=i(6),s=n(u),h=i(7),c=n(h);e.default={props:{options:{type:Object,required:!0},type:{type:String,default:"highcharts"},width:{type:String,default:"100%"},height:{type:String,default:"250px"}},data:function(){return{id:"highcharts-"+(new Date).getTime()}},watch:{options:function(){this.buildChart()},width:function(){this.buildChart()},height:function(){this.buildChart()}},computed:{styles:function(){return{width:isNaN(this.width)?this.width:this.width+"%",height:isNaN(this.height)?this.height:this.height+"%"}}},methods:{buildChart:function(){switch(this.type){case"stock":case"highstock":c.default.chart(this.id,this.options);break;case"maps":case"highmaps":s.default.chart(this.id,this.options);break;default:o.default.chart(this.id,this.options)}}},mounted:function(){this.buildChart()}}},function(t,e,i){var n=i(3)(i(1),i(4),null,null);t.exports=n.exports},function(t,e){t.exports=function(t,e,i,n){var r,o=t=t||{},u=typeof t.default;"object"!==u&&"function"!==u||(r=t,o=t.default);var s="function"==typeof o?o.options:o;if(e&&(s.render=e.render,s.staticRenderFns=e.staticRenderFns),i&&(s._scopeId=i),n){var h=Object.create(s.computed||null);Object.keys(n).forEach(function(t){var e=n[t];h[t]=function(){return e}}),s.computed=h}return{esModule:r,exports:o,options:s}}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement;return(t._self._c||e)("div",{style:t.styles,attrs:{id:t.id}})},staticRenderFns:[]}},function(t,e){t.exports=require("highcharts")},function(t,e){t.exports=require("highcharts/highmaps")},function(t,e){t.exports=require("highcharts/highstock")},function(t,e,i){t.exports=i(0)}]); -------------------------------------------------------------------------------- /gruntfile.js: -------------------------------------------------------------------------------- 1 | var webpack = require("webpack"); 2 | var path = require('path'); 3 | var nodeExternals = require('webpack-node-externals'); 4 | 5 | module.exports = function (grunt) { 6 | 7 | var env = grunt.option('env') || 'dev'; 8 | // Project configuration. 9 | grunt.initConfig({ 10 | pkg: grunt.file.readJSON('package.json'), 11 | 12 | clean: { 13 | build: ['./dist'] 14 | }, 15 | 16 | 17 | watch: { 18 | webpack: { 19 | files: ['./src/**/*.vue', './src/**/*.js'], 20 | tasks: ['webpack'], 21 | options: { 22 | spawn: false, 23 | }, 24 | } 25 | 26 | }, 27 | 28 | // webpack 29 | 30 | webpack: { 31 | 32 | client: { 33 | entry: { 34 | 'main': ['./src/main.js'] 35 | }, 36 | output: { 37 | path: path.resolve(__dirname, 'dist/'), 38 | //path: "./dist/", 39 | filename: '[name].js' 40 | 41 | }, 42 | module: { 43 | rules: [{ 44 | test: /\.vue$/, 45 | loader: 'vue-loader', 46 | options: { 47 | loaders: { 48 | // Since sass-loader (weirdly) has SCSS as its default parse mode, we map 49 | // the "scss" and "sass" values for the lang attribute to the right configs here. 50 | // other preprocessors should work out of the box, no loader config like this nessessary. 51 | 'scss': 'vue-style-loader!css-loader!sass-loader', 52 | 'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax' 53 | } 54 | // other vue-loader options go here 55 | } 56 | }, 57 | { 58 | test: /\.js$/, 59 | loader: 'babel-loader', 60 | exclude: /node_modules/ 61 | }, 62 | // Allow loading of JSON files 63 | // { 64 | // test: /\.json$/, 65 | // loader: "json", 66 | // }, 67 | //{test: /\.json$/, loader: "json"} 68 | { test: /\.json$/, loader: 'json-loader' }, 69 | { 70 | test: /\.css$/, 71 | use: ['style-loader', 'css-loader'] 72 | }, 73 | 74 | { 75 | test: /\.(png|jpg|gif|svg)$/, 76 | loader: 'file-loader', 77 | options: { 78 | name: '[name].[ext]?[hash]' 79 | } 80 | } 81 | ] 82 | }, 83 | externals: [nodeExternals()], 84 | performance: { 85 | hints: 'warning' 86 | }, 87 | //devtool: 'source-map', 88 | devtool: '#source-map', 89 | plugins: [ 90 | new webpack.optimize.UglifyJsPlugin({ minimize: true }), 91 | // new webpack.ProvidePlugin({ 92 | // $: "jquery", 93 | // jQuery: "jquery", 94 | // 'window.Tether': "tether", 95 | // 'Tether': "tether" 96 | // 97 | // }), 98 | // new webpack.DefinePlugin({ 99 | // 'process.env': { NODE_ENV: JSON.stringify("production") } 100 | // }), 101 | // new webpack.optimize.CommonsChunkPlugin({ 102 | // filename: '[chunkhash:8].js', 103 | // children: true, 104 | // async: true, 105 | // minChunks: 2 106 | // }), 107 | new webpack.DefinePlugin({ 108 | 'process.env': { NODE_ENV: JSON.stringify(env) } 109 | }), 110 | new webpack.LoaderOptionsPlugin({ 111 | minimize: true 112 | }) 113 | ] 114 | }, //end client 115 | 116 | 117 | }, // end webpack 118 | 119 | 120 | }); 121 | 122 | // Load the plugin that provides the "uglify" task. 123 | grunt.loadNpmTasks('grunt-contrib-watch'); 124 | grunt.loadNpmTasks('grunt-contrib-clean'); 125 | grunt.loadNpmTasks('grunt-webpack'); 126 | 127 | // Default task(s). 128 | //grunt.registerTask('default', ['clean', 'uglify', 'requirejs:client', 'htmlmin', 'cssmin', 'imagemin']); 129 | grunt.registerTask('default', ['clean', 'webpack']); 130 | 131 | }; 132 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | #About 3 | Highcharts component for Vue.js version >= 2.0 4 | 5 | # Installation 6 | 7 | Install via NPM 8 | 9 | ```js 10 | npm install v-highcharts 11 | ``` 12 | 13 | ```js 14 | import Vue from 'vue' 15 | import HighCharts from 'v-highcharts' 16 | 17 | // global register 18 | Vue.use(HighCharts); 19 | 20 | ``` 21 | 22 | # Highcharts Example 23 | 24 | ``` 25 | 26 | 31 | 32 | 33 | 93 | ``` 94 | 95 | 96 | # Highstock Example 97 | 98 | ``` 99 | 100 | 105 | 106 | 1987 | ``` 1988 | 1989 | # Hightmaps 1990 | 1991 | ``` 1992 | 1993 | 1998 | 1999 | 2000 | 2270 | ``` 2271 | --------------------------------------------------------------------------------