在 <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);
  }
}

注意：代码未经测试

在 <div> 中显示条形图

diplay barchart in a <div>

dart

chart.js