0

我正在尝试将 Javascript 图表库 Chartist 包装在 Polymer 元素中。除了样式，一切都按预期工作。图表看起来没有样式（就像每个图表示例在没有加载 css 时所做的那样）。

我创建了一个样式模块，如https://www.polymer-project.org/1.0/docs/devguide/styling.html#style-modules中所述，将其包含在我的元素中，并带有链接 [rel=import] 和样式标记并将chartist.css的所有内容复制/粘贴到样式模块中。不适用于 Firefox/Chrome。

为了证明样式模块完全被加载和处理，我包含了一个 ul#message 标记并使用指令对其进行样式设置。奇迹般有效。

我想问题是图表师创建了 SVG 图表。有谁知道如何处理样式 SVG 或者可以指出我的方向？

到目前为止，这是我的代码：

风格模块：

<dom-module id="chartist-styles">
  <template>
    <style>
      :host { display: inline-block; }
      #messages { list-style-type: none; }  

      /* All the contents of chartist.css */

    </style>
  </template>
</dom-module>

聚合物元素：

<link rel="import" href="../../bower_components/polymer/polymer.html">
<!-- Includes chartist.js via script tag -->
<link rel="import" href="../chartist-import.html">

<link rel="import" href="../chartist-styles.html">
<dom-module id="test-charts-line">

    <template>

        <style include="chartist-styles"></style>
        <div id="chartist" class="ct-chart"></div>
        <ul id="messages"></ul>

    </template>

    <script>

    (function() {
        'use strict';

        Polymer({

            is: 'test-charts-line',

            properties: {

                chart: {
                    notify: true    
                },

                data: {
                    type: Object,
                    value: function(){
                        return {};
                    }
                },

                options: {
                    type: Object,
                    value: function(){
                        {}
                    }
                }
            },

            observers: [
                'updateChart(data.*, options.*)'
            ],

            updateChart: function(){

                this.chart = null;

                if(this.options == null){
                    this.chart = new Chartist.Line( '#chartist' , this.data );
                } else {
                    this.chart = new Chartist.Line( '#chartist' , this.data, this.options );    
                }

                let child = document.createElement('li');
                child.textContent = 'blub';
                Polymer.dom(this.$.messages).appendChild(child);

            },

            ready: function(){

                // Taken from a getting-started example on
                // https://gionkunz.github.io/chartist-js/examples.html
                this.data = {
                    // A labels array that can contain any sort of values
                    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
                    // Our series array that contains series objects or
                    // in this case series data arrays
                    series: [
                        [5, 2, 4, 2, 0]
                    ]
                };

                this.options = {
                    width: 300,
                    height: 200
                };

            }
        });
    })();

    </script>
</dom-module>
4

1 回答 1

3

在 Polymer文档中找到了我的问题的解决方案：动态创建的 DOM 节点的样式可以通过调用来应用

ready: function() {
  this.scopeSubtree(this.$.container, true);
}

wherethis.$.container引用模板中的 DOM 节点，在我上面的示例中，它是this.$.chartist.

不适用于聚合物元素。如果您作用域的子树包含任何具有本地 DOM 的 Polymer 元素，则 scopeSubtree 将导致后代的本地 DOM 样式错误。

于 2016-03-14T17:23:15.243 回答