weizhenye / vue-highcharts Goto Github PK
View Code? Open in Web Editor NEW:bar_chart: Highcharts component for Vue
License: MIT License
:bar_chart: Highcharts component for Vue
License: MIT License
Hello everybody:
first, i sorry by my horrible english.
I am working in a project with vue-highcharts but at moment to run display this error (TypeError: a.Highcharts.error is not a function) and them nothing!
Someone happened something like this?
I hope you can help me.
Bye people and thanks.
静态数据的话,可以直接在图表里显示出来。那动态获取的数据应该怎么处理才能显示出来呢?
按照demo ref获取的图表对象 结合官方的导出函数 无法导出图表?有解决方案吗?
Hi! I think it is just a silly question but I am lost right now.
I use vue-cli and imported vue-highcharts in the main.js where I also create my new Vue({}).
In my component the chart is rendered with the global options from my main.js. Now I want to change options from inside my component.
<highstock :options="options"></highstock>
...
methods: {
update() {
const vm = this;
vm.Highcharts.setOptions({
navigator: {
maskFill: 'rgba(43, 43, 55, 1)'
},
});
},
}
No error or something when I call the update function. just nothing happens. What am I doing wrong?
whay?
First, thanks for writing this great component!
I am using a gauge plot and wanted to annotate the chart freely via the Renderer.text API (http://api.highcharts.com/highcharts/Renderer.text).
How can I get functions to immediately fire that are called as the third parameter to Highcharts.chart?
Example below:
http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/members/renderer-text-on-chart/
Thanks!
Hello,
how would I access the chart object to call (for example) setExtremes
?
In my case, Highcharts has been included as global instance, and "import VueHighcharts from 'vue-highcharts'" throws highcharts error 16
https://www.highcharts.com/errors/16
Is it supported that vue-highcharts works with global highcharts together?
Highcharts Error #17
请问一下,该插件是否支持3D饼图
If i try to use Highcharts styled mode i'm getting the following error:
[Vue warn]: Error in callback for watcher "options": "TypeError: Cannot read property '0' of undefined"
I simply imported the highcharts file under /js/
folder like this
import Highcharts from 'highcharts/js/highstock'
Is it currently not possible to use styled mode or how does it work?
Hi Zhenye,
Thanks for sharing your highcharts wrapper.
I'm trying to use the Drilldown bar chart, but cannot get it working.
So far, my code is looking like:
import Vue from 'vue'
import VueHighcharts from 'vue-highcharts'
import HighChartsDrillDown from 'highcharts/modules/drilldown'
Vue.use(VueHighcharts, { HighChartsDrillDown, HighChartsData })
And then in my template:
<highcharts :options="graph" ref="highcharts"></highcharts>
Where graph has the same data provided in the sample
The chart renders, but I cannot click on the bars to drill down.
Hi @weizhenye ,
i found a small bug i think, if you use a loop to show differents chart, they all have the same value: https://jsfiddle.net/z11fe07p/835/
With view of data: https://jsfiddle.net/z11fe07p/836/
请教一下,如何在这种情况下使用
like
TestLineChart.vue
<template>
<highcharts :options="options"></highcharts>
</template>
<script type="text/babel">
export default {
name: 'demo',
data: () => ({
options: {
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 80,
plotBorderWidth: 1
},
title: {
text: 'Sales per employee per weekday'
},
xAxis: {
categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura']
},
yAxis: {
categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
title: null
},
colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor: '#FFFFFF'
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 280
},
tooltip: {
formatter: function () {
return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> sold <br><b>' +
this.point.value + '</b> items on <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>';
}
},
series: [{
name: 'Sales per employee',
borderWidth: 1,
data: [[0, 0, 10], [0, 1, 19], [0, 2, 8], [0, 3, 24], [0, 4, 67], [1, 0, 92], [1, 1, 58], [1, 2, 78], [1, 3, 117], [1, 4, 48], [2, 0, 35], [2, 1, 15], [2, 2, 123], [2, 3, 64], [2, 4, 52], [3, 0, 72], [3, 1, 132], [3, 2, 114], [3, 3, 19], [3, 4, 16], [4, 0, 38], [4, 1, 5], [4, 2, 8], [4, 3, 117], [4, 4, 115], [5, 0, 88], [5, 1, 32], [5, 2, 12], [5, 3, 6], [5, 4, 120], [6, 0, 13], [6, 1, 44], [6, 2, 88], [6, 3, 98], [6, 4, 96], [7, 0, 31], [7, 1, 1], [7, 2, 82], [7, 3, 32], [7, 4, 30], [8, 0, 85], [8, 1, 97], [8, 2, 123], [8, 3, 64], [8, 4, 84], [9, 0, 47], [9, 1, 114], [9, 2, 31], [9, 3, 48], [9, 4, 91]],
dataLabels: {
enabled: true,
color: '#000000'
}
}]
}
}),
methods: {}
};
</script>
但是这里没又vue.use以及highcharts component的定义
how to import the stock technical indicators, such as ema, sma? thanks
Is there any demo for dynamic chart using axios or something similar? Thanks.
请问如何选择主题?
我这样写没有效果
import Vue from 'vue'
import VueHighcharts from 'vue-highcharts'
import 'highcharts/themes/dark-unica'
Vue.use(VueHighcharts)
I am wondering if there is a way to set options and stuff localy, not only globally.
I use following plugin instalation:
Highcharts.Pointer.prototype.reset = function () {
return undefined;
};
Vue.use(VueHighcharts, { Highcharts });
Unfortunately, this means that the reset function is not working in all charts in all pages. Is there a way, how to set some config options only for certain chart?
当实时更新chart时,highcharts Update the series with a new set of options.highcharts update ,使用vue-highcharts更新options,chart会整体重新绘制,可能是我方法不对,请问怎样更新series
中的data
而不导致整体重新绘制
If I want to use one of these themes how would I set it up using vue-highcharts?
Thanks
tested in v0.0.5
The npm module of vue-highcharts doesn't have a dependency defined on highcharts, so unless you install the highcharts module manually vue-highcharts will throw an error because highcharts is missing.
You should either add the dependency, or if it's not there for a reason, at least explain it in the readme
In order to render type: solidgauge
chart highcharts-more
and modules/solid-gauge
is needed. Is this possible to do with this component?
Please consider this example:
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/dynamic-update/
I tried options of the example and vue-highcharts would create new chart object every second because it changed series
in the options. It was not rendered smoothly like the example.
Can you please explain how can I use charts such as funnel chart?
谢谢
If the highcharts component is in another component that has a vue transition (like a fade out), the highchart component ignores this and is deleted right away.
Visually, removing everything in the beforeDestroy event fixes it.
https://github.com/weizhenye/vue-highcharts/blob/master/dist/vue-highcharts.js#L71
I'm wondering if this will cause any unexepected errors down the line or any broken references. Is this fix safe to use?
hi,
i want to use highcharts word cloud with vue.
is it possible to do that like this:
jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/wordcloud/
thanks
I want to use Solid Gauge series type for Highcharts and I am using Webpack.
Here is my code :
import Vue from "vue";
import VueHighcharts from "vue-highcharts"
import Highcharts from "highcharts";
import solidgauge from "highcharts/modules/solid-gauge";
solidgauge(Highcharts);
Vue.use(VueHighcharts, { Highcharts })
The error I given is :
Uncaught TypeError: r is not a constructor
at Object.a.extendClass (eval at <anonymous> (app.js:990), <anonymous>:17:409)
at eval (eval at <anonymous> (app.js:2227), <anonymous>:64:31)
at eval (eval at <anonymous> (app.js:1836), <anonymous>:29:26)
at Object.<anonymous> (app.js:1836)
at __webpack_require__ (app.js:556)
at fn (app.js:87)
at eval (eval at <anonymous> (app.js:1854), <anonymous>:34:1)
at Object.<anonymous> (app.js:1854)
at __webpack_require__ (app.js:556)
at fn (app.js:87)
请问该项目支持vue2.0吗?项目最近准备从1.0迁移到2.0
Hi @weizhenye, thanks for the amazing work you've done.
I'm starting to learn Vue and I'm having a hard time to figure out how to use highcharts-pattern-fill (v2) with vue-highcharts.
In a common single page I just need to drop a <script scr=".../highchart-pattern-fill-v2.js">
in the head, but in Vue if I do the same I get an error saying Highcharts is undefined which is probably because I'm trying to run this file before loading Highcharts.
So, could you please provide any direction or example to how achieving vue-highcharts with highchart-pattern-fill?
Thanks a lot.
Hi, I am creating charts but I noticed download options does not appear in the chart and reading your documentation I can't find what should I do to implement this part.
When i resize browser window i see error - Cannot read property 'clientWidth' of null
Does this implement the Highcharts data module?
http://www.highcharts.com/docs/working-with-data/data-module
Do you know what is the issue? Do i need any lifecycle hooks?
i have been extend it :
<template> <highcharts :options="chartOptions" :type="type"></highcharts> </template>
<script>
import defaultOptions from './chartsOptions'
import deepAssign from 'deep-assign'
export default {
props: {
options: Object,
type: {
type: String,
default: 'normal'
}
},
computed: {
chartOptions: function () {
if (this.type === 'sparkline') {
return defaultOptions.sparkline
// return deepAssign({}, defaultOptions.sparkline, this.options || {})
} else if (this.type === 'normal') {
return deepAssign({}, defaultOptions.normal, this.options || {})
} else {
return this.options
}
}
},
mounted () {
console.log(this.chartOptions)
}
}
` </script>
use it
`
data () {
return {
options: {}
}
created () {
this.options={
series: [{
type: 'column',
name: ' ',
data: [[1516204800000, 3.0], [1516287600000, 6.9], [1516291200000, 9.5]],
borderWidth: 0
}]}
}
`
and defaultOptions have some optionsset.
but defaultOptions seens to be no effect.
Hi!
I have a problem with xAxis on setExtremes method (appears 1970-01-01).
I am getting the data from an api, but the main instance of Vue is outside this component (is in app.js).
<template>
<div>
<highstock :options="options" v-if="load"></highstock>
<div> {{ info }} </div>
</div>
</template>
<script>
import VueHighcharts from 'vue-highcharts';
import Highcharts from 'highcharts';
import loadStock from 'highcharts/modules/stock';
import loadMap from 'highcharts/modules/map';
import loadDrilldown from 'highcharts/modules/drilldown';
import loadHighchartsMore from 'highcharts/highcharts-more';
import loadSolidGauge from 'highcharts/modules/solid-gauge';
export default {
name: 'GraphAir',
components: { VueHighcharts, Highcharts, loadStock, loadMap, loadDrilldown, loadHighchartsMore, loadSolidGauge },
props: {
ipSelected : {
type: String,
required: true
}
},
watch: {
ipSelected: function(newVal, oldVal) { // watch it
console.log('Prop changed: ', newVal, ' | was: ', oldVal)
this.ip = newVal;
this.getTemp();
}
},
data(){
var vm = this;
return {
resultsTemp: [],
load: false,
ip: this.ipSelected,
info: '',
options: {
xAxis: {
events: {
setExtremes: function (e) {
vm.report(e);
}
}
},
rangeSelector: {
selected: 1
},
series: [{
name: 'Air',
data: []
}]
}
};
},
created(){
this.getTemp();
this.load = true;
},
methods: {
getTemp(){
let uri = "https://something.com/index.php/aireTemp/" + this.ipSelected;
this.results = [];
axios.get(uri)
.then(response => {
let resTemp = response.data;
let temps = [];
for (var i=0; i < resTemp.length; i++) {
var t = [resTemp[i].created_at, resTemp[i].roomTemp];
temps.push(t);
}
// this.resultsTemp = temps;
this.options.series[0].data = temps;
console.log(this.options.series[0].data);
// this.options.series[0].data = this.resultsTemp;
// this.series[0].data = temps;
// console.log(this.resultsTemp);
});
},
report(e) {
this.info = 'e.min: ' + this.Highcharts.dateFormat(null, e.min) + ' | e.max: ' + this.Highcharts.dateFormat(null, e.max) + ' | e.trigger: ' + e.trigger;
}
}
}
</script>
I think the context of vm = this is different when I have to do vm.report(e)
How can I use this function in a subcomponent like this?
Hi,
Sorry for my ignorance but how do I disable useUTC in global options using this component?
I'm looking forward for your response.
Thanks,
I am using the following but it is not showing the export buttons:
exporting: {
enabled: true,
buttons: {
contextButton: {
enabled: true
}
}
},
I'm trying to initialize a highmap inside a ".vue" component being packaged by Webpack. I'm following the procedure to use Vue.use(VueHighcharts, { Highcharts });
with a Highcharts loaded from highmaps but in my template <highmaps>
is not being registered as a vue component.. <highcharts>
and <highcharts-renderer>
are, though.
My component looks like this:
https://gist.github.com/thedamon/ed9dc91e65dfb014bc99206e46b0738d
import Vue from 'vue'
import vueHighcharts from 'vue-highcharts';
import Highcharts from 'highcharts';
import loadStock from 'highcharts/modules/stock';
loadStock(Highcharts);
export default () => {
Vue.use(vueHighcharts, { Highcharts })
}
Hi,
I'm try to generate a 3d graphic, in the options of graphic I pass 3d options, but it doesn't work with 3d, just 2d.
how can I do this?
When the range selector is part of a highstocks chart, it is rendered correctly, but the buttons/handles don't move when selected with mouse.
As the title says, i'm unable to successfully call chart.drillUp()
Here's a Fiddle https://jsfiddle.net/mwLbw11k/563/
The browser console throws an error. It works fine without Vue, so i'm unsure where the issue might be.
Any clues?
Thanks!
How does one set global options? In the standard library, you do this:
Highcharts.setOptions({
global: {
timezoneOffset: 5 * 60
}
});
How is it done in vue-highcharts?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.