绘制动态变化的谷歌图表与角度值

Draw dynamically changing google chart with angular values

本文关键字：动态 变化 谷歌 绘制      更新时间：2023-09-26

我已经搜索了很多，但仍然没有得到一个明确的答案，所以我只是想再问一遍，这样有人可以为我澄清。

我有这个谷歌图表:

 google.charts.load('current', {'packages': ['corechart']});
google.charts.setOnLoadCallback(drawChart1);
    function drawChart1() {
        var data = google.visualization.arrayToDataTable([
        ['Year', 'Savings'],
        [0, 0],
        [1, 2546250],
        [2, 2851500],
        [3, 3156750],
        [4, 3462000],
        [5, 3767250],
    ]);
    var options = {
        hAxis: {title: '', titleTextStyle: {color: '#ccc'}, count: 8},
        vAxis: {minValue: 0, gridlineColor: '#bcbcbc', backgroundColor: 'red', count: 8, format: '$#,###'},
        legend: {position: 'none'},
        colors: ['#91c33b'],
    };
    var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
        chart.draw(data, options);
     }
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" class="charts"></div>

正如你所看到的，我已经为这些点使用了静态值，但我需要它们根据我在angular中添加的滑块进行更改。是否有可能在滑块移动或更新时以某种方式重新绘制图表，并且图表采用动态值而不是静态值?

如果你正在使用angular，你也许可以创建一个指令。请看这里的例子。

https://github.com/square/metrics/blob/master/main/web/static/script.js,https://github.com/square/metrics/blob/master/main/web/static/index.html L157

相关文章：