charts.js堆叠条与聚合物的包装图表元素

时间:2016-08-08 09:48:11

标签: jquery polymer chart.js web-component

我一直试图让堆叠选项在chart.js的图表元素聚合物包装中工作而没有任何成功,我已经尝试了以下代码,但它只是给了我一个空白区域。这是我的column-chart.html

<link rel="import" href="../bower_components/polymer/polymer.html"> <link rel="import" href="../bower_components/jquery/dist/jquery.min.js"> <link rel="import" href="../bower_components/chart-elements/chart-bar.html">

 <chart-bar id="alarmsChart" data="[[data]]" style="width: 600px; height: 360px;"></chart-bar>

      Polymer({
               is: 'column-chart',
               ready: function () {
                 this.data = {
                   type: 'bar',
                   data: {
                       labels: ["January", "February", "March", "April", "May", "June", "July"],
                      datasets: [{
                        label: 'Dataset 1',
                        backgroundColor: "rgba(5,141,199,0.5)",
                        data: [100, 110, 95, 100, 100, 102, 101],
                        stack: 1
                     }, {
                        label: 'Dataset 2',
                        backgroundColor: "rgba(80,180,50,0.5)",
                       data: [94, 96, 98, 94, 97, 97, 96],
                       stack: 1
                }, {
                       label: 'Dataset 3',
                       backgroundColor: "rgba(237,86,27,0.5))",
                       data: [98, 97, 87, 85, 99, 84, 94],
                       stack: 1
                      }]
                  },
                options: {
                    responsive: true,
                    scales: {
                        xAxes: [{
                            stacked: true,
                        }],
                        yAxes: [{
                            stacked: true
                        }]
                        }
                    }
        }}
       });
</script>

1 个答案:

答案 0 :(得分:1)

1)在你的第三种背景颜色中有一个超出的画面:

backgroundColor: "rgba(237,86,27,0.5))",

应该是:

backgroundColor: "rgba(237,86,27,0.5)",

2)您尝试在data对象中插入data属性,这是多余的。

3)您不必定义type: 'bar'属性,因为它是由控件的名称设置的。

4)对于options属性,options对象应单独设置:

&#13;
&#13;
<dom-module id="column-chart">

    <template>
        <div>
            <chart-bar data="[[data]]" options="[[options]]"></chart-bar>
        </div>
    </template>

    <script>
        Polymer({
            is: 'column-chart',
            ready: function() {

                this.data = {
                    labels: ["January", "February", "March", "April", "May", "June", "July"],
                    datasets: [
                    {
                        label: 'Dataset 1',
                        backgroundColor: "rgba(5,141,199,0.5)",
                        data: [100, 110, 95, 100, 100, 102, 101],
                        stack: 1
                    }, 
                    {
                        label: 'Dataset 2',
                        backgroundColor: "rgba(80,180,50,0.5)",
                        data: [94, 96, 98, 94, 97, 97, 96],
                        stack: 1
                    }, 
                    {
                        label: 'Dataset 3',
                        backgroundColor: "rgba(237,86,27,0.5)",
                        data: [98, 97, 87, 85, 99, 84, 94],
                        stack: 1
                    }]
                }

                this.options = {
                    responsive: true,
                    scales: {
                        xAxes: [{
                            stacked: true,
                        }],
                        yAxes: [{
                            stacked: true
                        }]
                    }
                }   
            }
        });
    </script>

</dom-module>
&#13;
&#13;
&#13;