Dart DivElement

时间:2018-09-26 13:47:39

标签: dart dart-html

我想将图表插入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'内添加图表

我的Barchart代码

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:找不到方法:null上的“ toString” 原因:无 堆栈跟踪: [TypeError:无法在BarChart.Chart $ 1处读取null的属性'toString'

1 个答案:

答案 0 :(得分:0)

将此添加到您的元素

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

createContainer

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