Javascript Chartjs和聚合物1.7.0

将Chartjs与Polymer一起使用时，设置为

dom:“shadow”

，我得到一个错误

未捕获类型错误：未能在“窗口”上执行“getComputedStyle”：参数1不是“元素”类型

但是如果我从Polymer的初始设置中删除dom:“shadow”

，那么错误就消失了。我不明白是什么问题

我是否应该使用“dom”：“shadow”

实时预览（请参阅控制台）：

我的代码如中所示

窗口聚合物={
dom:'shadow'，//本地dom在受支持的情况下使用shadowdom呈现
lazyRegister:true//设置自定义元素的惰性注册
};
html，正文{
填充：0；
保证金：0；
框大小：边框框；
高度：500px；
宽度：100%；
}
图表元素{
身高：100%；
宽度：100%；
}
：主持人{
显示：块；
身高：100%；
宽度：100%；
}
#图表{
身高：100%；
宽度：100%；
}
聚合物({
是：'图表元素'，
就绪：函数（）{
this.async（函数（）{
这是我的图纸；
}.bind（this），2000年）；
},
_绘图图：函数（）{
var标签=[“七月”、“八月”、“九月”、“十月”]；
变量rasied=[“1710”、“0”、“0”、“0”]；
已解决的var=[“1642”、“0”、“0”、“0”]；
var ctx=这个$$（“#图表”）；
var图表=新图表（ctx{
键入：“行”，
数据：{
标签：标签，
数据集：[
{
标签：“凸起”，
填充：假，
线张力：0.1，
背景颜色：“F44336”，
边框颜色：“F44336”，
borderCapStyle:“butt”，
borderDash:[]，
borderDashOffset:0.0，
borderJoinStyle:“圆形”，
pointBorderColor:#F44336“，
pointBackgroundColor:#fff“，
点边界宽度：6，
点半径：5，
pointHoverBackgroundColor:#F44336“，
pointHoverBorderColor:“rgba（2201）”，
pointHoverBorderWidth:2，
点半径：1，
点半径：10，
数据：拉希德
},
{
标签：“已解决”，
填充：假，
线张力：0.1，
背景颜色：“009688”，
边框颜色：“009688”，
borderCapStyle:“butt”，
borderDash:[]，
borderDashOffset:0.0，
borderJoinStyle:“圆形”，
pointBorderColor:#009688“，
pointBackgroundColor:#fff“，
点边界宽度：6，
点半径：5，
pointHoverBackgroundColor:#009688“，
pointHoverBorderColor:“rgba（2201）”，
pointHoverBorderWidth:2，
点半径：1，
点半径：10，
数据：已解决
}
]
},
选项：{
回答：是的，
MaintaintAspectRatio:false，
比例：{
雅克斯：[{
滴答声：{
贝吉纳泽罗：是的
}
}]
}
}
});
}
});

当ChartJS初始化其视图时，它试图通过调用

getComputedStyle（）

来读取给定画布容器的最大高度。在shadowdom中，容器是自定义元素的shadowroot，它是一个，不支持

getComputedStyle（）

，导致您看到的运行时错误

要解决此问题，请将

包装在

HTMLElement

中，例如

您可能还对使用该库感兴趣，它是一个围绕ChartJS的聚合包装器，不会出现启用阴影DOM的问题：

<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>

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