Диаграмма js Canvas не реагирует на прокрутку в мобильном телефоне - PullRequest
Новая
       0

Диаграмма js Canvas не реагирует на прокрутку в мобильном телефоне

0 голосов
/ 09 декабря 2018

Я создал линейную диаграмму, используя "диаграмму 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();
}

Работает нормально.Но когда я прокручиваю на мобильных устройствах, созданный график не отображается.Я думаю, что это было бы проблемой с приведенным выше отзывчивым кодом.Как я могу исправить эту проблему.Может кто-нибудь помочь мне решить эту проблему.

...