在<div> </div>中显示条形图

Question

我尝试将此问题缩短，我想在黄色块中显示图表，而不是如屏幕截图所示：

不幸的是，我不知道如何将div与图表对象绑定。

以下是代码：

<!-- import polymer-element's definition -->
<link rel="import" href="../../packages/polymer/polymer.html">
<link rel="import" href="../../packages/paper_elements/paper_button.html">

    <polymer-element name="main-app">
        <template>
            <style>
            </style>

            <div class="bg-container">
                <h1>Chart Demo</h1>

                <div class="bg-container">

                    <div class="chart">
                        **// The chart should be displayed here**
                    </div>
                    <div>
                        <paper-button raised class="colored" on-click="{{chartdemo}}">char tdemo</paper-button>
                    </div>
                </div>

            </div>
        </template>
        <script type="application/dart" src="main_app.dart"></script>
    </polymer-element>

和飞镖文件：

import 'dart:html';
import 'package:chart/chart.dart';
import 'package:polymer/polymer.dart' show CustomTag, observable, PolymerElement;

@CustomTag('main-app')
class MainApp extends PolymerElement {

  MainApp.created() : super.created() {
    Bar bar = new Bar({
        'labels' : ["A","B","C"],
        'datasets' : [
            {
                'fillColor' : "rgba(220,220,220,0.5)",
                'strokeColor' : "rgba(220,220,220,1)",
                'data' : [65,59,90]
            },
        ]

    }, null);

    DivElement container3 = new DivElement();
    container3.style.height ='200px';
    container3.style.width =  '200px';
    document.body.children.add(container3);
    bar.show(container3);
  }

  void chartdemo(Event e, var detail, Node target) {

  }

}

Answer 1

提示：不要在元素的构造函数中访问DOM。有一些生命周期方法，例如ready，domReady和attached()，您可以确定DOM已准备就绪。

<div id="chartWrapper" class="chart">
  **// The chart should be displayed here**
</div>

@CustomTag('main-app')
class MainApp extends PolymerElement {

  MainApp.created() : super.created();

  void chartdemo(Event e, var detail, Node target) {

  }

  @override
  void attached() {
    super.attached();
    initChart();
  }

  void initChart() {
    Bar bar = new Bar({
        'labels' : ["A","B","C"],
        'datasets' : [
            {
                'fillColor' : "rgba(220,220,220,0.5)",
                'strokeColor' : "rgba(220,220,220,1)",
                'data' : [65,59,90]
            },
        ]

    }, null);

    DivElement container3 = new DivElement();
    container3.style.height ='200px';
    container3.style.width =  '200px';
    $['chartWrapper'].append(container3);
    bar.show(container3);
  }
}

警告：代码未经过测试