Chartjs和聚合物1.7.0

Question

當使用Chartjs與聚合物的合成與設置爲dom: 'shadow'，我得到一個錯誤

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

我的代碼作爲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()就可以了。在你使用Shadow DOM的情況下，容器是自定義元素的影子根，這是一個DocumentFragment，它不支持getComputedStyle()，導致你看到的運行時錯誤。

要解決的問題，敷<canvas>在HTMLElement，如<div>。

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

codepen

您可能也有興趣使用chart-elements庫，它是圍繞ChartJS一個聚合物包裝，不表現出與陰影DOM問題啓用：codepen