有一个ChartJS画布区域，我已经在图表区域中创建了插件文本。我想制作一个图表以响应使用手机和PC。在Web浏览器上部署网页时，如果对网页进行缩放，则无法相应地更改图表（ChartJS）。该图表看起来好像卡在一个很小的空间中。我该如何克服这个问题？
抽样我的图表：
var plugin = {
id: 'plugin',beforeDraw: function(chart) {
var width = chart.chart.width,height = chart.chart.height,ctx = chart.chart.ctx,xScale = chart.scales['x-axis-0'],yScale = chart.scales['y-axis-0'];
ctx.restore();
ctx.font = "1em sans-serif";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
// ctx.fillText("s(A)",width * .28,height * .70);
ctx.fillText(
"s(A)",xScale.getPixelForValue('2005'),yScale.getPixelForValue(3)
);
ctx.fillText(
"s(B)",xScale.getPixelForValue('2015'),yScale.getPixelForValue(9)
);
ctx.save();
}
};
var xCoord = new Array(1997,2003,2005,2009,2014,2018,2019);
var yCoord = new Array(1,3,5,6,10,9);
var c = [];
for (var i = 0; i < xCoord.length; i++) {
var obj = {
x: xCoord[i],y: yCoord[i]
};
c.push(obj);
}
var ctx = document.getElementById('myTau').getcontext('2d');
var myTau = new Chart(ctx,{
type: 'line',data: {
datasets: [{
label: 'None',data: c,borderWidth: 1,borderColor: "#ef1414",fill: false,cubicInterpolationmode: 'monotone'
}]
},plugins: [plugin],options: {
title: {
display: true,text: 'My Chart Must Change Responsively When zoomming Web Browser'
},tooltips: {
mode: 'nearest',intersect: true
},scales: {
xAxes: [{
type: 'linear',position: 'bottom',scaleLabel: {
display: true,labelString: 'Year Assembly',fontSize: 14
}
}],yAxes: [{
scaleLabel: {
display: true,labelString: 'Aquifer Values Corresponding',fontSize: 15
}
}]
}
}
});
<canvas id="myTau" height="120"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>