Question

我有一个模板（更大的html的局部视图，使用角度路线映射），代码如下：

<div  style="width: 100% !important; max-width: 1000px; height: auto !important;">
       <canvas id="barChart">
        </canvas>
</div>

在angular的控制器初始化中，我使用以下代码创建一个图表：

$scope.chart = new Chart(document.getElementById("barChart").getContext("2d")).StackedBar(chartData, opts);

问题是，当我通过刷新（URL）访问我的页面时，会绘制图表，但是当我通过ngRoute访问页面时（单击菜单项只绘制中心部分模板），不会绘制图表。我调试到Chart.js并发现当通过模板访问页面时，此代码的运行方式不同：

if (element['offset'+dimension])
        {
            return element['offset'+dimension];
        }
        else
        {
            return document.defaultView.getComputedStyle(element).getPropertyValue(dimension);
        }

当我通过URL /刷新访问时，在canvas元素上设置了offsetWidth属性。当我通过angular的路径机制访问时，不设置offsetWidth，并且执行document.defaultView ...返回0，因此不会绘制图表。

Answer 1

我通过在每个控制器的初始化上重新创建画布来解决问题。我没有尝试@bviale发布的解决方案：

getChartContext = function(id, width, height) {
  var canvas = document.getElementById(id);
  var canvasParent = canvas.parentNode;
  canvas.remove();
  canvas = document.createElement("canvas");
  canvas.id = id;
  canvas.width = width;
  canvasParent.appendChild(canvas);
  var ctx = canvas.getContext('2d');
  return ctx;
};

当ngRoute加载模板时，OffsetWidth / offsetHeight为零

1 个答案: