Question

我正在使用Chart JS开发Polymer应用程序。目前我的图表有自定义元素。我使用测试数据集来测试元素。当我在ready回调中初始化Chart.js的canvas元素时（当元素“准备好”并且你需要操作DOM时回调Polymer recommends you to use），什么都没有出现。但是，当我将其添加到附加的回调时，图表正确初始化。为什么它没有在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。

Answer 1

我注意到Chart.js计算了在初始化时传递给它的上下文元素的大小（宽度和高度）。在ready回调的情况下，元素存在，但尚未添加到文档中。但是，Chart.js中的计算假定元素已经在文档中。它使用document.defaultView.getComputedStyle(element).getPropertyValue(dimension)。因此，它失败了。当您使用attached回调时，元素已添加到文档中并且计算成功。

使用Chart.js进行聚合物就绪与附加回调

1 个答案: