Hello.Mr. kamil.m.
Thank you so much for your advice, it helped me a lot.
I checked the related boost configuration documents and highcharts-vue configuration documents you posted, and made corresponding changes in the options.
The performance improvement of changing 'spline' to 'line' is obvious.
From the previous 4-5 times in one second, it reached 8-9 times, but it still did not fully reach the 100ms rendering time I set, that is, 10 times in one second.
The goal is to render once 100ms of data of 20k length.
Do you have a look at what might be possible to improve?
This is all the code of my vue single page demo
template:
Code: Select all
<template>
<div class="chartElem">
<highcharts
id="chart"
class="chart"
:highcharts="hcInstance"
:constructor-type="constructorType"
:options="chartOptions"
:updateArgs="updateArgs"
:deepCopyOnUpdate="false"
></highcharts>
<div>
<div class="display: flex;">
<button @click="reset()">reset</button>
<button @click="stop()">stop</button>
<button @click="start()">start</button>
</div>
</div>
</div>
</template>
config;
Code: Select all
constructorType: 'chart',
updateArgs: [false, false, false],
hcInstance: Highcharts,
chartOptions: {
chart: {
// type: 'spline',
animation: false,
showAxes: true,
zoomType: 'x',
events: {
selection: function (event) {},
click: (event) => {}
}
},
credits: {
enabled: false
},
exporting: { enabled: false },
plotOptios: {
series: {
animation: false
}
},
boost: {
useGPUTranslations: true,
usePreallocated: false,
seriesThreshold: 1,
allowForce: true,
pixelRatio: 0
},
scrollbar: {
enabled: true,
height: 8,
barBackgroundColor: '#d1d1d1',
barBorderColor: '#d1d1d1',
rifleColor: '#d1d1d1',
barBorderRadius: 5,
buttonBorderWidth: 0,
buttonArrowColor: 'rgba(0,0,0,0)'
},
xAxis: {
gridLineWidth: 0,
opposite: true,
labels: {
format: '{value} hz'
},
minorGridLineWidth: 0,
minorTickInterval: 'auto',
minorTickColor: 'rgb(230, 230, 230)',
minorTickWidh: 1,
minorTickLength: 10,
tickPosition: 'outside'
},
yAxis: {
max: 30000,
min: -2000,
title: {
text: null
},
labels: {
format: '{value} hz'
},
lineWidth: 0,
minorTickInterval: 'auto',
minorTickColor: 'rgb(230, 230, 230)',
minorTickWidh: 1,
minorTickLength: 10
},
title: {
text: null
},
mapNavigation: {
enabled: true,
enableButtons: false
},
subtitle: {
text: null
},
legend: {
enabled: false
},
tooltip: {
valueDecimals: 2
},
series: [{
boostThreshold: 1,
data: [],
color: '#6fcd98',
lineWidth: 0.5,
point: {
events: {
click: (event) => {}
}
},
states: {
hover: {
animation: false,
marker: {
enabled: false
}
}
}
}]
}
The websocket is not connected for the time being, I wrote a 'for' locally to simulate the data
function:
Code: Select all
reset () {
Highcharts.charts[0].xAxis[0].setExtremes(undefined, undefined)
Highcharts.charts[0].yAxis[0].setExtremes(undefined, undefined)
},
start () {
this.timer = setInterval(() => {
this.payNewData()
}, 100)
},
stop () {
clearInterval(this.timer)
},
payNewData () {
console.log('go', this.intervalNum++, new Date())
Highcharts.charts[0].series[0].setData(this.getData(20000))
},
getData (n) {
const arr = []
for (let i = 0; i < n; i++) {
arr.push([
i,
2 * Math.random() * i
])
}
return arr
}
Looking forward to your reply, the first day of July, I wish you a happy day