2016-08-08 61 views
1

Ich habe versucht, die gestapelten Optionen in chart-elements Polymer Wrapper für chart.js ohne Erfolg zu bekommen, habe ich den folgenden Code, aber es nur versucht gibt mir einen leeren Platz. dies ist mein Spalte-chart.htmlcharts.js stacked bar mit polymer wrapper chart-elements

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

Antwort

1

1) Es gibt einen parethesis mehr in Ihrem 3. background-color:

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

sho sein ULD:

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

2) Sie versuchen, eine data Eigenschaft in einem data Objekt einzufügen, die redundant ist.

3) Sie müssen die Eigenschaft type: 'bar' nicht definieren, da sie über den Namen des Steuerelements festgelegt wird.

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

+0

Danke:

4) Die options Objekt sollte separat für das options Attribut gesetzt werden! funktioniert jetzt sehr gut! – mahaSaez

+0

@mahaSaez. Bitte. Du kannst neu upvote wenn du magst :-) – Supersharp