我使用“chart js”创建了一个折线图 . 这是我的代码,
HTML
<canvas id="canvas" style="height: 600px"></canvas>
使用Javascript
var lineChartData = {
labels: ['name','name1'],
datasets: [{
label: 'Vocabulary Score',
borderColor: window.chartColors.red,
backgroundColor: window.chartColors.red,
fill: false,
data: [100, 200],
yAxisID: 'y-axis-1'
}]
};
window.onload = function() {
var ctx = document.getElementById('canvas').getContext('2d');
window.myLine = Chart.Line(ctx, {
data: lineChartData,
options: {
responsive: true,
hoverMode: 'index',
stacked: false,
title: {
display: true
},
scales: {
xAxes: [ {
scaleLabel: {
display: true,
labelString: 'Brand Name'
}
} ],
yAxes: [{
type: 'linear',
display: true,
position: 'left',
id: 'y-axis-1',
ticks: {
min: 0,
max: 1000,
stepSize: 100
},
scaleLabel: {
display: true,
labelString: 'Score'
}
}]
}
}
});
然后我使用下面的代码来制作画布的响应性 .
window.addEventListener("resize", handleResize);
function handleResize() {
var w = window.innerWidth-2; // -2 accounts for the border
var h = window.innerHeight-2;
stage.canvas.width = w;
stage.canvas.height = h;
//
var ratio = 100/100; // 100 is the width and height of the circle content.
var windowRatio = w/h;
var scale = w/100;
if (windowRatio > ratio) {
scale = h/100;
}
// Scale up to fit width or height
c.scaleX= c.scaleY = scale;
// Center the shape
c.x = w / 2;
c.y = h / 2;
stage.update();
}
它工作正常 . 但是当我在移动设备上滚动时,创建的图表没有显示 . 我认为上面的响应代码会有问题 . 我该如何解决这个问题 . 有人可以帮我解决这个问题 .