问题描述
我正在使用Chart JS开发Polymer应用程序。 目前，我的图表有一个自定义元素。 我使用测试数据集来测试元素。 当我在ready回调中初始化Chart.js的canvas元素时（ 在元素“就绪”并且需要操纵DOM时该回调），但没有任何显示。 但是，当我将其添加到附加的回调中时，图表会正确初始化。 为什么它不能在ready回调中正确初始化？
cnsmpo-graph.html
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-material/paper-material.html">
<script src="../../bower_components/Chart.js/Chart.js"></script>
<script src="../../bower_components/Chart.Scatter.js/Chart.Scatter.js"></script>
<dom-module id="cnsmpo-graph">
<style>
:host {
display: block;
}
</style>
<template>
<paper-material>
<canvas id="chart" width="400" height="400"></canvas>
</paper-material>
</template>
</dom-module>
<script>
(function() {
Polymer({
is: 'cnsmpo-graph',
properties: {
foo: {
type: String,
value: 'bar',
notify: true
}
},
attached: function () {
var data = {
labels: [1, 5, 10, 20, 30, 100, 250],
datasets: [
{
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: [
{ x: 3, y: 10}
]
}
]
};
var element = this.$.chart.getContext('2d');
var chart = new Chart(element).Scatter(data, {bezierCurve: false,});
}
});
})();
</script>
index.html
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="generator" content="Polymer Starter Kit" />
<title>Polymer Starter Kit</title>
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- Chrome for Android theme color -->
<meta name="theme-color" content="#303F9F">
<!-- Web Application Manifest -->
<link rel="manifest" href="manifest.json">
<!-- Tile color for Win8 -->
<meta name="msapplication-TileColor" content="#3372DF">
<!-- Add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="Polymer Starter Kit">
<link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png">
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Polymer Starter Kit">
<link rel="apple-touch-icon" href="images/touch/apple-touch-icon.png">
<!-- Tile icon for Win8 (144x144) -->
<meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
<!-- build:css styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild-->
<!-- build:js bower_components/webcomponentsjs/webcomponents-lite.min.js -->
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<!-- endbuild -->
<link rel="import" href="../styles/app-theme.html">
<link rel="import" href="cnsmpo-graph/cnsmpo-graph.html">
<style>
</style>
</head>
<body unresolved class="fullbleed layout vertical">
<span id="browser-sync-binding"></span>
<template is="dom-bind" id="app">
<cnsmpo-graph></cnsmpo-graph>
</template>
<!-- build:js scripts/app.js -->
<script src="scripts/app.js"></script>
<!-- endbuild-->
</body>
</html>
index.html开头的许多代码来自Polymer Starter Kit。
1楼
Maria
2
2015-08-01 07:27:02
我注意到Chart.js计算了初始化时传递给它的上下文元素的大小（宽度和高度）。
在ready回调的情况下，该元素存在，但尚未添加到文档中。
但是，在Chart.js中完成的计算假定该元素已经在文档中。
它使用document.defaultView.getComputedStyle(element).getPropertyValue(dimension) 。
因此，它失败了。
使用attached回调时，该元素已添加到文档中，并且计算成功。