3

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

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

使用 Web Inspector 我发现画布元素的宽度和高度属性超过了占位符大小：

<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

0

您只需要在 JS 中找到这一行：

this.pixelRatio = devicePixelRatio / backingStoreRatio;

并替换为：

this.pixelRatio = 1;
于 2013-04-04T09:32:35.703 回答
0

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

jquery.flot.js 
jquery.flot.resize.min.js
于 2018-09-28T01:48:57.043 回答