我如何在 google 图表中使用 angular js

Question

我想用用户的数据自定义条形图，并在运行时间相应地重新绘制。用户应提供有关轴及其值的详细信息。我应该写什么代码？ angular 变量是一个不错的选择吗？

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses'],
      ['2004',  600,      400],
      ['2005',  1170,      460],
      ['2006',  660,       1120],
      ['2007',  1030,      540]
      ['2008',  2000,      250]
    ]);

    var options = {
      title: 'Company Performance',
      vAxis: {title: 'Year',  titleTextStyle: {color: 'blue'}}
    };

    var chart = new google.visualization.BarChart(document.getElementById('div1'));

    chart.draw(data, options);
  }
</script>

Answer 1

看看AngularJs Google Chart Tools directive

如果您想做 "Angular way" 的事情，您应该使用 directives 进行所有 DOM 操作。所以我建议您将所有数据存储在控制器中，然后在您的视图中使用指令从您的数据呈现视图

Answer 2

完成这个Google chart tools AngularJs Directive

我如何在 google 图表中使用 angular js

how can i use angular js into google charts

charts

bar-chart

angularjs