Question

我想在Polymer元素中包装Javascript图表库Chartist。除了造型之外，一切都按预期工作。图表看起来没有样式（就像没有加载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>

Answer 1

在Polymer docs中找到我的问题的解决方案：可以通过调用

来应用动态创建的DOM节点的样式

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

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

不适用于Polymer元素。如果是您的范围的子树包含任何具有本地DOM的Polymer元素，scopeSubtree将导致后代＆＃39;本地DOM的样式不正确。

在Polymer中动态生成SVG的样式

1 个答案: