3

bbUI.jsツールキットも使用している BB10 WebWorks アプリケーションでFlot折れ線グラフを使用しています。

Ripple エミュレーターでアプリを実行すると、チャートのサイズは適切です (1000x500)。ただし、アプリをデバイス (Dev Alpha) にデプロイすると、グラフのサイズが大きすぎます (2243x1121)。

Web Inspector を使用すると、canvas 要素の幅と高さの属性がプレースホルダーのサイズを超えていることがわかりました。

<div id="weight-chart" style="width: 1000px; height: 500px; 
     padding: 0px; position: relative;">
  <canvas class="flot-base" 
     style="direction: ltr; position: absolute; left: 0px; top: 0px; 
            width: 1000px; height: 500px;" 
     width="2243" height="1121">
  </canvas>
  <canvas class="flot-overlay" 
    style="direction: ltr; position: absolute; left: 0px; top: 0px; 
           width: 1000px; height: 500px;" 
    width="2243" height="1121">
  </canvas>
</div>

これは HTML ページのフラグメントです。

<div data-bb-type="screen" data-bb-scroll-effect="on" id="chart-page" 
     data-bb-indicator="true">

  <!-- chart goes here: -->
  <div id="weight-chart" style="width:1000px;height:500px;"></div>

  <div data-bb-type="action-bar" data-bb-back-caption="Back"></div>
</div>

そして、これは実行される Flot への JavaScript 呼び出しですondomready。

bb.init({onscreenready: function(element, id, params) {
  }, 
  ondomready: function(element, id, params) {
    if (id == 'chart') {
      chartDataset = ...
      chartOptions = ...
      $.plot($("#weight-chart", element), chartDataset, chartOptions);
      element.getElementById('chart-page').refresh();
    }
});

何が起こっているのか手がかりはありますか？

4

2 に答える 2