Изменение размера холста -IOS Приложение HTML5 - (диаграмма JS)

Question

У меня возникла странная прерывистая проблема с Chart JS (http://www.chartjs.org/) в приложении html5 IOS.

я определил мое полотно, как указано здесь -

<canvas id="overallChart" height="270" width="270" style="height:270px!important; width:270px!important;"></canvas> 

Есть несколько диаграмм в страницах - графики срабатывают через настройку бейсика диаграммы расслоения плотного -

var lineData = { 
labels : ["Jan","Feb","March","April","May"], 
datasets : [ 
    { 
     fillColor : "rgba(255,128,38,0.9)", 
     strokeColor : "rgba(225,225,225,1)", 
     pointColor : "rgba(225,225,225,1)", 
     pointStrokeColor : "#fff", 
     data : [65,59,90,81,56] 
    }, 
    { 
     fillColor : "rgba(119,62,20,0.9)", 
     strokeColor : "rgba(225,225,225,1)", 
     pointColor : "rgba(225,225,225,1)", 
     pointStrokeColor : "#fff", 
     data : [28,48,40,19,96] 
    } 
] 
} 

var lineChart = new Chart(document.getElementById("lineChart").getContext("2d")).Line(lineData) 

Несмотря на инлайн Важно стиль - холст случайным образом вытягивает огромную версию диаграммы и изменяет значения высоты/ширины.

Испытывал ли кто-нибудь еще такое поведение? Любые предложения по исправлению?

Answer 1

Попробуйте изменить эту строку:

var lineChart = new Chart(document.getElementById("lineChart").getContext("2d")).Line(lineData) 

в

var lineChart = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineData); 

и посмотреть, если это работает для вас.

Answer 2

В вашем javascript вы пытаетесь выбрать элемент с идентификатором 'lineChart', но в своем HTML вы даете элементу идентификатор 'generalChart'. Изменение:

var lineChart = new Chart(document.getElementById("lineChart").getContext("2d")).Line(lineData) 

к:

var lineChart = new Chart(document.getElementById("overallChart").getContext("2d")).Line(lineData) 

Answer 3

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

Следовательно, перед тем, как нарисовать его, необходимо заменить использованный холст новым. В jQuery:

$("#overallChart").replaceWith("<canvas id='overallChart' height='270' width='270'></canvas>"); 
var lineChart = new Chart(document.getElementById("overallChart").getContext("2d")).Line(lineData);