I have a highchart in a html file which works fine. When I moved that to vue.js project it does not work. the code in html file is as below
<html>
<head>
<title>
Chart
</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
</head>
<body>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script>
Highcharts.setOptions({
global: {
useUTC: false
}
});
const chart = new Highcharts.chart('container', {
chart: {
type: 'spline',
animation: Highcharts.svg,
marginRight: 10,
},
title: {
text: 'Live random data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: null,
maxZoom: 10 * 1000
},
yAxis: {
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: []
});
document.addEventListener('DOMContentLoaded', function() {
var i = 0;
setInterval(function () {
if (chart.series.length > 0) {
var series = chart.series[0];
var x = (new Date()).getTime(),
y = Math.random();
if (series.data.length < 20)
series.addPoint([x, y], true, false);
else
series.addPoint([x, y], true, true);
console.log(1)
}
else {
a = { name: 'aaa', data: [{x: (new Date()).getTime(), y:Math.random()}] };
chart.addSeries(a);
console.log(chart.series[0].name)
}
}, 1000);
});
</script>
</body>
</html>
and the code in vue is as below
<template>
<div class="container">
<b-row>
<b-col md="12" sm="12">
<b-card header="Line Chart">
<div class="chart-wrapper">
<vue-highcharts :options="options" :Highcharts="Highcharts" ref="lineCharts"></vue-highcharts>
</div>
</b-card>
</b-col>
</b-row>
</div>
</template>
<script>
import VueHighcharts from 'vue2-highcharts'
import Highcharts from 'highcharts'
export default {
name: 'chartSample',
components: {
VueHighcharts
},
data () {
return {
Highcharts: Highcharts,
options: {
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10
},
title: {
text: 'Live random data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: null,
maxZoom: 10 * 1000
},
yAxis: {
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
Highcharts.numberFormat(this.y, 2)
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: []
}
}
},
mounted () {
let chart = this.$refs.lineCharts
setInterval(function () {
if (chart.series != null) {
var series = chart.series[0]
var x = (new Date()).getTime()
var y = Math.random()
if (series.data.length < 20) {
series.addPoint([x, y], true, false)
} else {
series.addPoint([x, y], true, true)
}
} else {
var a = { name: 'aaa', data: [{x: (new Date()).getTime(), y: Math.random()}] }
chart.addSeries(a)
}
}, 1000)
}
}
</script>
I don't know what is the reason, but it doesn't work. It seems most parts are undefined or the chart object in the page has a problem. But it is working in html file.
