jquery - BlackBerry bbUI 应用程序中 Flot 图表的 Canvas 尺寸太大

Question

我正在使用 Flot BB10 WebWorks 应用程序中的折线图也使用 bbUI.js工具包。

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

你知道发生了什么吗？

Answer 1

您所需要的只是在 JS 中找到这一行:

this.pixelRatio = devicePixelRatio / backingStoreRatio;

并替换为:

this.pixelRatio = 1;