Question

我正在尝试使用聚合物自定义元素来格式化和显示由charts.js呈现的图表 - 我正在尝试让自定义元素<chart-element>将其实例化属性chartID传递给构造函数正确创建图表 - 对于我的生活我不能使用传递的属性使getContext()方法/函数在任何东西上运行

这是实例化的自定义元素声明：

<chart-element chartID="figure1"></chart-element>

这是我的自定义元素：

<polymer-element name="chart-element" attributes="chartID">
  <template>
    <style>...</style>
    <div class="content">
        <canvas id="{{chartID}}" class="pieChart"></canvas>
    </div>
  </template>
  <script>
    Polymer('chart-element', {
        ready: function () {

            var dataFigure1 = [...];

            alert(this.chartID);
            alert(this.$.chartID);
            alert(this.chartID.getContext('2d');

            var canvasElement = this.chartID.getContext("2d");
            alert("canvasElement: "+canvasElement);

            new Chart(canvasElement).Pie(dataFigure1);
        }
   });
  </script>
</polymer-element>

我已经尝试了最后一行的百万种不同组合来渲染图表，但我似乎无法找到一种有效的方法

alert(this.chartID);解析为“figure1”，但new Chart(this.chartID.getContext('2d')).Pie(dataFigure1);抛出“未定义不是函数”错误

alert(this.$.chartID);解析为“未定义”

alert(this.chartID.getContext('2d');根本没有解决，或者不警觉，并不奇怪

new Chart(this.$.figure1.getContext('2d')).Pie(dataFigure1);工作正常，但我正在努力不对此行进行硬编码......

Answer 1

alert(this.chartID)显示元素的chartID属性的内容。此属性包含字符串“figure1”，因为它作为属性chartID="figure1"传入。

this.chartID.getContext('2d')尝试在此字符串上调用函数getContext()。由于字符串不包含此函数，因此您会得到“undefined is not a function”错误。

this.$.chartID未定义，因为$函数返回的对象包含 keys 是其中元素的 ids 的属性元素的模板。所以你可以写this.$.figure1而不是this.$.chartID（这只有在你写<canvas id="chartID">时才有效）

长话短说，你能做的就是写this.$[this.chartID]。这将访问id为this.chartID的元素，而该元素又是“figure1”。

但问题是：你为什么要这样做呢？由于shadow DOM将元素中的所有DOM与外部隔离，因此如果只编写<canvas id="chart">，则不会导致任何问题。即使您实例化了许多图表元素，这些相同的ID也不会相互干扰。

附加说明：Polymer-Labs GitHub存储库中有Chart.js Polymer element，Rob Dodson也编写了一些Chart.js Polymer elements。

聚合物，在构造函数中使用属性数据绑定

1 个答案: