我使用“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();
}

它工作正常 . 但是当我在移动设备上滚动时,创建的图表没有显示 . 我认为上面的响应代码会有问题 . 我该如何解决这个问题 . 有人可以帮我解决这个问题 .