Побочные эффекты от Chartjs только для * некоторых * клиентов

Я работал над несколькими диаграммами Chart.js и обнаружил странное поведение.Побочные эффекты от Chartjs только для * некоторых * клиентов

В этой скрипке: http://jsfiddle.net/h42tv3xv/ люди нажимают кнопки «День», «Неделя» или «Месяц».

Что он должен делать: Просто обновите таблицу с потенциально новой отображаемой информацией (пирогом и пончиками на самом деле не имеет ничего нового)

Что не следует делать: в качестве стороны эффект для приблизительно, он растет размером <canvas> на каждом клике. Он делает это для меня. Но это не делает этого для многих других людей, обращающихся к этой скрипке. Вот снимок экрана:

enter image description here

Почему он делает это для некоторых людей, а не другие? Как я могу исправить эту проблему? Если вам интересно, я сначала задал вопрос о чем-то еще об этих диаграммах, но это может быть несколько related.

Любое мнение, что может быть причиной этого в моем браузере и других браузерах/компьютерах?

Edit, я понимаю, что скрипка является большим, так это то, что я делаю, по существу:

// Assign and Create all canvas contexts 
    var ctx = $("#graph1").get(0).getContext("2d"); 
    var ctx2 = $("#graph2").get(0).getContext("2d"); 
    var ctx3 = $("#graph3").get(0).getContext("2d"); 

// Instantiate new charts and pass in generated data 
    var myChart = new Chart(ctx).Line(graph1Generator("day")); 
    var myDoughnutChart = new Chart(ctx2).Doughnut(graph2Generator("day")); 
    var myPieChart = new Chart(ctx3).Pie(graph3Generator("day"));

тогда я добавляю (для каждой кнопки) прослушивателя событий, который разрушает каждый холст, и создает новый с новой информацией. Ниже приведен пример кнопки «недели»:

weekButton.addEventListener("click", function(){ 

    myChart.destroy(); 
    myChart = new Chart(ctx).Line(graph2Generator("Week")); 

    myDoughnutChart.destroy(); 
    myDoughnutChart = new Chart(ctx2).Doughnut(graph2Generator("week")); 

    myPieChart.destroy(); 
    myPieChart = new Chart(ctx3).Pie(graph3Generator("week")); 


});

источник

2015-05-05 ApathyBear

Мне кажется странным, что мой указатель мыши считается где-то примерно на 100px ниже и на 50px больше справа, чем на самом деле. – Xufox

какой браузер вы используете, что позволяет увидеть эту проблему, я использую chrome Version 42.0.2311.135 m и не вижу описанной проблемы. – Quince

Я тестировал это на всех браузерах. Это версия Chrome версии 42.0.2311.135 (64-разрядная версия), Safari Version 8.0.3 (10600.3.18) и Firefox 37.0.2. Я считаю, что это самые современные версии каждого браузера. – ApathyBear

обруча элемент внутри обертки и установить его максимальную ширину, чтобы быть 80% или по желанию.

Отключить отзывчивость.

Отметьте это fiddle и сообщите мне, хотите ли вы по-прежнему получать раздутую диаграмму при нажатии на повторное рендеринг.

<div class="wrapper"> 
    <canvas id="graph1" width="300" height="300"></canvas> 

    <canvas id="graph2" width="250" height="250"></canvas> 

    <canvas id="graph3" width="250" height="250"></canvas> 
</div> 


.wrapper { 
    max-width: 80%; 
}

источник

2015-06-06 22:58:34

У меня было такое же поведение, определяющее padding определение моей canvas. Я удалил padding, и теперь у меня нет размера.

источник

2015-06-11 07:32:45 Sabba

Побочные эффекты от Chartjs только для * некоторых * клиентов

ответ

Смежные вопросы