Chartjs und Polymer 1.7.0

Question

Bei der Verwendung von Chartjs mit Polymer mit als dom: 'shadow' Einstellung, ich einen Fehler als

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

bekommen Aber wenn ich dom: 'shadow' aus der Grundeinstellung für Polymer zu entfernen, dann wird der Fehler Weg. Ich kann nicht verstehen, was das Problem ist.

Sollte ich nicht 'dom':'shadow' verwenden?

Live-Vorschau (die Konsole sehen): https://s.codepen.io/jenishngl/debug/mOVJPm

Mein Code wie in 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

Wenn ChartJS seiner Ansicht initialisiert, die maximale Höhe der gegebenen Leinwand Container zu lesen versucht, durch den Aufruf getComputedStyle() darauf. In Ihrem Fall von Shadow DOM ist der Container das Schattenstammverzeichnis des benutzerdefinierten Elements. Dies ist ein DocumentFragment, der getComputedStyle() nicht unterstützt, was zu dem Laufzeitfehler führt, den Sie sehen.

Um das Problem zu umgehen, wickeln Sie die <canvas> in einem HTMLElement, wie <div>.

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

codepen

könnten Sie auch mit der chart-elements Bibliothek interessiert sein, die ein Polymer-Wrapper um ChartJS ist und zeigen nicht das Problem mit Schatten DOM aktiviert: codepen