飞镖 DivElement

Question

我想在 Div 中插入我的图表。在 HTML 中，我有一个像这样的 div 元素

<div id="barchart_values" style="width: 900px; height: 300px;"></div>

在 dart 中，我正在创建一个这样的容器。

Element createContainer() {
var e = new DivElement()
  ..style.height = '300px'
  ..style.maxWidth = '70%'
  ..style.marginBottom = '50px';
document.body.append(e);
return e;
}

函数 createContainer 工作正常，如上...我想在“barchart_values”div 内准确地绘制图表。我尝试如下所示，但它不起作用

Element createContainer() {
 var e = querySelector('barchart_values');
 document.body.append(e);
 return e;
}

谁能告诉我如何在 div 元素 'barchart_values' 中添加图表

我的条形图代码

import 'package:modern_charts/modern_charts.dart';
BarChart chart;
DataTable table;  
table = new DataTable([
    ['Categories', 'Current', 'X1', 'X2', 'X3'],
    ['Value', 0, 0, 0, 0],
    ['', null, null, null, null],
  ]);



  var container1 = createContainer();

  var options = {
    'animation': {
      'onEnd': () {

      }
    },
    'series': {
      'labels': {'enabled': true}
    },
    'xAxis': {
      'crosshair': {'enabled': true},
      'labels': {'maxRotation': 90, 'minRotation': 0}
    },
    'yAxis': {'maxValue': 20, 'minInterval': 5},
    'title': {'text': 'Values'},
    'tooltip': {'valueFormatter': (value) => '$value core'}
  };

  chart = new BarChart(container1);
  chart.draw(table, options);
  //// end of chart creation

这是我遇到的错误

NullError: 找不到方法: 'toString' on null 原因：空 堆栈跟踪： [TypeError：无法在 BarChart.Chart$1 处读取 null 的属性“toString”

Answer 1

将此添加到您的元素中

<div id="barchart_values" style="width: 900px; height: 300px;"></div>

和createContainer 一样

Element createContainer() {
 return getElementById('barchart_values');
}