Morris.js显示不正确

Question

I have created a graph with morris.js but it isn't shown correctly.

Here is my code

initChart: function(){
          console.log('go! ');
          var graphchart = document.createElement('div');
          graphchart.setAttribute('id','graphchart');
          graphchart.style.height = '200px';
          graphchart.style.width = '500px';

          new Morris.Line({

            element: graphchart,
            data: [
              { y: '2006', a: 100, b: 90 ,c:50},
              { y: '2007', a: 75,  b: 65 ,c:50},
              { y: '2008', a: 50,  b: 40 ,c:50},
              { y: '2012', a: 100, b: 90 ,c:50}
            ],
            xkey: 'y',
            ykeys: ['a', 'b','c'],
            labels: ['Value1','Value2','Value3']
          });
          this.fire('my-devicelist-chart-created',{graph: graphchart});
        }

So what is the problem that i got an wrong graph? My HTML implementation:

    <style>

    </style>

    <div y-scroll fit id="myfirstchart">

      <paper-button on-tap="{{initStart}}">
        <core-icon icon="chevron-right" class="icon"></core-icon>
        <span>{{language.test}}</span>
      </paper-button>

    </div>

  </div>

Answer 1

For all people with the same problem.

resize: true

Helped me out. Set it to true (default: false) when you create your Morris graph.