Chartjsおよびポリマー1.7.0

Question

dom: 'shadow'として設定してポリマーとChartjsを使用している場合、私は

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

としてエラーを取得しています。しかし、私は、ポリマーの初期設定からdom: 'shadow'を削除する場合は、エラーがあります行った。私は問題が何であるか理解できない。

'dom':'shadow'を使用しないでください。

ライブプレビュー（コンソールを参照してください）：https://s.codepen.io/jenishngl/debug/mOVJPm

私のコードChartJSは、そのビューを初期化すると、それが呼び出すことによって、与えられたキャンバスコンテナの最大の高さを読み取ろうと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

のようにそれにはgetComputedStyle()があります。 Shadow DOMの場合、コンテナはDocumentFragmentのgetComputedStyle()をサポートしていないカスタム要素のシャドウルートであり、結果として実行時エラーが発生します。

この問題を回避するには、<canvas>をHTMLElementに入れてください（<div>など）。

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

codepen

あなたはまた、ChartJS周りポリマーラッパーであると影DOMに問題があることを示さないchart-elementsライブラリを、使用することに興味があるかもしれないが有効になって：codepen