Chartjs 和 Polymer 1.7.0

Question

将 Chartjs 与 Polymer 一起使用并设置为 dom: 'shadow' 时，出现

错误

Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element

但是如果我从 Polymer 的初始设置中删除 dom: 'shadow'，那么错误就消失了。我不明白问题是什么。

我不应该使用 'dom':'shadow' 吗？

实时预览（查看控制台）：https://s.codepen.io/jenishngl/debug/mOVJPm

我的代码如 https://codepen.io/jenishngl/pen/mOVJPm

<script>
  window.Polymer = {
            dom: 'shadow',          // Local DOM is rendered using shadow DOM where supported
            lazyRegister: true      // Sets lazy registeration for custom elements
        };
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
<base href="https://cdn.rawgit.com/download/polymer-cdn/1.5.0/lib/">

<link rel="import" href="polymer/polymer.html">

<style>
  html, body{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    height: 500px;
    width: 100%;
  }
  chart-element{
    height: 100%;
    width: 100%;
  }
</style>

  <dom-module id="chart-element">
  <template>
    <style>
      :host{
        display: block;
        height: 100%;
        width: 100%;
      }
      #chart{
        height: 100%;
        width: 100%;
      }
    </style>
    <canvas id="chart"></canvas>
  </template>
    <script>
  Polymer({
    is: 'chart-element',

    ready: function(){
      this.async(function(){
        this._drawChart();
      }.bind(this), 2000);
    },

    _drawChart: function(){
      var labels = ["JUL", "AUG", "SEP", "OCT"];
                var rasied = ["1710", "0", "0", "0"];
                var solved = ["1642", "0", "0", "0"];
                var ctx = this.$$('#chart');
                var chart = new Chart(ctx, {
                        type: 'line',
                        data: {
                            labels: labels,
                            datasets: [
                                {
                                    label: "Raised",
                                    fill: false,
                                    lineTension: 0.1,
                                    backgroundColor: "#F44336",
                                    borderColor: "#F44336",
                                    borderCapStyle: 'butt',
                                    borderDash: [],
                                    borderDashOffset: 0.0,
                                    borderJoinStyle: 'round',
                                    pointBorderColor: "#F44336",
                                    pointBackgroundColor: "#fff",
                                    pointBorderWidth: 6,
                                    pointHoverRadius: 5,
                                    pointHoverBackgroundColor: "#F44336",
                                    pointHoverBorderColor: "rgba(220,220,220,1)",
                                    pointHoverBorderWidth: 2,
                                    pointRadius: 1,
                                    pointHitRadius: 10,
                                    data: rasied
                                },
                                {
                                    label: "Solved",
                                    fill: false,
                                    lineTension: 0.1,
                                    backgroundColor: "#009688",
                                    borderColor: "#009688",
                                    borderCapStyle: 'butt',
                                    borderDash: [],
                                    borderDashOffset: 0.0,
                                    borderJoinStyle: 'round',
                                    pointBorderColor: "#009688",
                                    pointBackgroundColor: "#fff",
                                    pointBorderWidth: 6,
                                    pointHoverRadius: 5,
                                    pointHoverBackgroundColor: "#009688",
                                    pointHoverBorderColor: "rgba(220,220,220,1)",
                                    pointHoverBorderWidth: 2,
                                    pointRadius: 1,
                                    pointHitRadius: 10,
                                    data: solved
                                }
                            ]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            scales: {
                                yAxes: [{
                                    ticks: {
                                        beginAtZero:true
                                    }
                                }]
                            }
                        }
                    });
    }
  });
</script>
</dom-module>
<chart-element></chart-element>

Answer 1

当 ChartJS 初始化其视图时，它会尝试通过调用 getComputedStyle() 来读取给定 canvas' 容器的最大高度。在 Shadow DOM 的情况下，容器是自定义元素的影子根，它是 DocumentFragment，不支持 getComputedStyle()，导致您看到的运行时错误。

要解决此问题，请将 <canvas> 包装在 HTMLElement 中，例如 <div>.

<template>
  <div>
    <canvas id="chart"></canvas>
  <div>
</template>

codepen

您可能也有兴趣使用 chart-elements library, which is a Polymer wrapper around ChartJS and does not exhibit the problem with Shadow DOM enabled: codepen

Chartjs 和 Polymer 1.7.0

Chartjs and Polymer 1.7.0

html

javascript

polymer

chart.js

polymer-1.0