Hi,
I have this code using chartjs and chartjs-plugin-zoom.
I met two problems:
-
I can not load the hammerjs, chartjs and plugin-zoom js by local folder, I already downloaded three js files and put them at the node-red/lib folder, and using the script below, it did not work as I expected. I checked other topics regarding offline cdn access, something need to be done in the settings.js, but I did not find the settings.js in node-red folder, only package.json,flows.json file like below:
<script type="text/javascript" src="lib/hammer.min.js"></script> <script type="text/javascript" src="lib/chart.umd.min.js"></script> <script type="text/javascript" src="lib/chartjs-plugin-zoom.min.js"></script> -
Every time I refresh the front end web page, the code line Chart.register(ChartZoom) will occur the error showed ChartZoom is not defined. However, if I do not put Chart.register(ChartZoom) in the mounted(), the chart can not be zoomed;
<template>
<div class="chart-container">
<v-btn
@click="resetZoom"
id="resetZoomBtn"
class="reset-btn">Reset</v-btn>
<canvas
id="myChart"
class="chart-canvas"></canvas>
</div>
</template>
<style scoped>
.chart-container {
width: 100%;
height: 100%;
position: relative;
padding-top: 80px;
}
.chart-canvas {
width: 100% !important;
height: 100% !important;
}
.reset-btn {
position: absolute;
top: 10px;
right: 10px;
z-index: 10;
}
</style>
<!--
<script type="text/javascript" src="lib/hammer.min.js"></script>
<script type="text/javascript" src="lib/chart.umd.min.js"></script>
<script type="text/javascript" src="lib/chartjs-plugin-zoom.min.js"></script>
-->
<script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.2"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@2.0.1"></script>
<script>
export default {
data() {
return {
myChart: null
}
},
mounted() {
try {
Chart.register(ChartZoom);
} catch(e) {
console.warn('ChartZoom register failed!', e);
}
const ctx = document.getElementById('myChart').getContext('2d');
this.myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: '',
data: [{ x: 1, y: 5 },
{ x: 2, y: 10 },
{ x: 3.5, y: 6 },
{ x: 4, y: 2 },
{ x: 3, y: 8 }],
borderColor: 'rgb(127, 147, 164)',
showLine: true,
pointRadius: 0,
tension: 0.1
}]
},
options: {
responsive: true,
interaction: { mode: 'nearest', intersect: true },
scales: {
x: { type: 'linear', title: { display: true, text: 'Position[mm]' } },
y: { type: 'linear', title: { display: true, text: 'Force[N]' } }
},
plugins: {
legend:{display:false},
zoom: {
pan: { enabled: true, mode: 'xy' },
zoom: { wheel: { enabled: true }, pinch: { enabled: true }, mode: 'xy' }
}
}
}
});
},
watch: {
msg: function ()
{
if(this.msg.topic===("POS/FORCE"))
{
this.updateCurve(this.msg.payload);
}
},
deep:true
},
methods: {
updateCurve: function (payload)
{
if (Array.isArray(payload)) {
this.myChart.data.datasets[0].data = payload;
this.myChart.resetZoom();
this.myChart.update();
}
},
resetZoom() {
if (this.myChart) {
this.myChart.resetZoom();
}
}
},
unmounted() {
if (this.myChart) {
this.myChart.destroy();
}
}
}
</script>
