support Renderer

Author: weizhenye

README.md

@@ -22,7 +22,7 @@ import VueHighcharts from 'vue-highcharts';
 Vue.use(VueHighcharts);
 ```
 
-If you want to use Highstock, Highmaps or any add-ons, you should pass in the `Highcharts` object [which included the corresponding modules](http://www.highcharts.com/docs/getting-started/install-from-npm).
+If you want to use Highstock, Highmaps or any other add-ons, you should pass in the `Highcharts` object [which included the corresponding modules](http://www.highcharts.com/docs/getting-started/install-from-npm).
 
 ```js
 // Use Highstock
@@ -45,12 +45,27 @@ loadMap(Highcharts);
 Vue.use(VueHighcharts, { Highcharts });
 ```
 
-Then you can use the component in your template. And you can access the `Highcharts` object via `vm.Highcharts`.
+Then you can use the components in your template.
 
 ```html
 <highcharts :options="options"></highcharts>
 <highstock :options="options"></highstock>
 <highmaps :options="options"></highmaps>
+<highcharts-renderer :width="width" :height="height"></highcharts-renderer>
 ```
 
 The `options` object can be found in [Highcharts API Reference](http://api.highcharts.com/highcharts), [Highstock API Reference](http://api.highcharts.com/highstock) and [Highmaps API Reference](http://api.highcharts.com/highmaps).
+
+`<highcharts-renderer>` [creates an independent renderer](http://api.highcharts.com/highcharts/Renderer).
+
+The `Highcharts` object is available at `vm.Highcharts`. If you want to access the `chart` or `renderer` instance, you can use child component refs:
+
+```html
+<highcharts :options="options" ref="highcharts"></highcharts>
+<highcharts-renderer :width="width" :height="height" ref="highchartsRenderer"></highcharts-renderer>
+```
+
+```js
+const { chart } = vm.$refs.highcharts;
+const { renderer } = vm.$refs.highchartsRenderer;
+```

src/constrators.js

@@ -0,0 +1,6 @@
+export default {
+  highcharts: 'Chart',
+  highstock: 'StockChart',
+  highmaps: 'Map',
+  'highcharts-renderer': 'Renderer'
+};

src/create.js

@@ -1,32 +1,37 @@
+import ctors from './constrators.js';
+
 function create(tagName, Highcharts) {
-  var ctors = {
-    highcharts: 'Chart',
-    highstock: 'StockChart',
-    highmaps: 'Map'
-  };
   var Ctor = Highcharts[ctors[tagName]];
   if (!Ctor) {
     return null;
   }
+  var isRenderer = tagName === 'highcharts-renderer';
   return {
     name: tagName,
     template: '<div></div>',
-    props: {
-      options: Object
-    },
+    props: isRenderer
+      ? {
+          width: { type: Number, required: true },
+          height: { type: Number, required: true }
+        }
+      : { options: { type: Object, required: true } },
     methods: {
-      render: function(options) {
-        var opts = options || {};
-        opts.chart = opts.chart || {};
-        opts.chart.renderTo = this.$el;
-        this._chart = new Ctor(opts);
+      _renderChart: function() {
+        if (isRenderer) {
+          this.renderer = new Ctor(this.$el, this.width, this.height);
+        } else {
+          var opts = JSON.parse(JSON.stringify(this.options));
+          opts.chart = opts.chart || {};
+          opts.chart.renderTo = this.$el;
+          this.chart = new Ctor(opts);
+        }
       }
     },
     mounted: function() {
-      this.render(this.options);
+      this._renderChart();
     },
     beforeDestroy: function() {
-      this._chart.destroy();
+      !isRenderer && this.chart.destroy();
     }
   };
 }

src/index.js

@@ -1,13 +1,14 @@
 import HighchartsOnly from 'highcharts';
+import ctors from './constrators.js';
 import create from './create.js';
 
 function install(Vue, options) {
   var Highcharts = (options && options.Highcharts) || HighchartsOnly;
   Vue.prototype.Highcharts = Highcharts;
-  ['highcharts', 'highstock', 'highmaps'].forEach(function(tagName) {
+  for (var tagName in ctors) {
     var component = create(tagName, Highcharts);
     component && Vue.component(tagName, component);
-  });
+  }
 }
 
 export default install;