Question

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

使用Ripple仿真器运行应用程序时，图表大小正确（1000x500）。但是，当我将应用程序部署到设备（Dev Alpha）时，图表大小太大（2243x1121）。

使用Web Inspector我发现canvas元素的width和height属性超出了占位符大小：

<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;

Answer 2

您的问题是实施大小不同的图表，因此您需要调整大小。您应该一起使用：

jquery.flot.js 
jquery.flot.resize.min.js

在BlackBerry bbUI应用程序中，Flot图表的画布大小太大

2 个答案: