Javascript 从谷歌图表制作柱形图表动画

我很难想出一个函数，当我使用一个滑块来来回…左和右…时，它会在我的图表中设置一个单列条的动画。。我已经阅读了GoogleCharts API文档中的动画文档，但是我很难理解我需要做什么

这是到目前为止我的代码。我从哪里开始想出如何使用我用钛制作的滑块为我的一个条设置动画？我使用evalJS函数从app.js文件调用函数

updateChart（）

。我已经通过在滑块来回移动时执行console.log来验证它是否有效。我只是不知道该如何将其应用于单列栏的动画制作。任何想法都很感激

在我的html页面上设置谷歌图表

    <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 = new google.visualization.DataTable();
            data.addColumn('string', 'Importance');
            data.addColumn('number', 'Earning');
            data.addColumn({type: 'string', role: 'style'});

            data.addRows([['',5,'#000000'], ['',5,'#ffffff'],['',5,'#666666'],['', 5,'#cccccc']]); 

        var options = 
        {
            width: 200, 
            height: 240, 
            legend: {
                position: 'none'
            }, 
            chartArea: {
                backgroundColor: 'none'
            }, 
            bar: {
                groupWidth: '100%'
            },
            animation: {
                duration: 1000,
                easing: 'out'
            }
        };

        function updateChart() {

        }

        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
            chart.draw(data, options);
        }

---

您需要为调用

updateChart

函数的滑块连接一个事件侦听器。

updateChart

函数应从滑块中获取值并更改数据表中的值，然后校准图表的

draw

方法。如何将事件侦听器连接到滑块取决于用于滑块的库。下面是一些示例代码，假设您的滑块对象有一个

change

方法来设置更改事件处理程序，还有一个`getValue方法来获取滑块的值：

[编辑：添加到滑块代码中]

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Importance');
    data.addColumn('number', 'Earning');
    data.addColumn({type: 'string', role: 'style'});

    data.addRows([
        ['',5,'#000000'],
        ['',5,'#ffffff'],
        ['',5,'#666666'],
        ['', 5,'#cccccc']
    ]); 

    var options = {
        width: 200, 
        height: 240, 
        legend: {
            position: 'none'
        }, 
        chartArea: {
            backgroundColor: 'none'
        }, 
        bar: {
            groupWidth: '100%'
        },
        animation: {
            duration: 1000,
            easing: 'out'
        }
    };

    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));

    function updateChart(value) {
        data.setValue(0, 1, value);
        chart.draw(data, options);
    }

    // create slider
    var sliderBarOne = Titanium.UI.createSlider({
        top: '310',
        left: '610',
        min: '0',
        max: '10',
        width: '37%',
        value: '5',
        backgroundImage: 'assets/sliderBar.png'
    });

    sliderBarOne.addEventListener('change', function(e) {
        updateChart(e.value);
    });

    chart.draw(data, options);
}

---

谢谢，我会试一试。我得到了最终传递给函数的值，我可以在console.log中看到它的值随滑块而变化，但图表仍然没有变化。想法？我看到了更新的代码，但我看不到你是如何连接到滑块的更改事件的。我添加了钩子..查看它。好的。这里的问题是范围问题。

updateChart

函数只存在于drawchart的范围内，因此您必须将滑块代码移动到那里，就像我的示例中一样。您不需要为此使用evalJS。

var sliderBarOne = Titanium.UI.createSlider({
    top: '310',
    left: '610',
    min: '0',
    max: '10',
    width: '37%',
    value: '5',
    backgroundImage: 'assets/sliderBar.png'
});
sliderBarOne.addEventListener('change', function(e) {
    chartView.evalJS("updateChart('" + e.value + "');");
});

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Importance');
    data.addColumn('number', 'Earning');
    data.addColumn({type: 'string', role: 'style'});

    data.addRows([
        ['',5,'#000000'],
        ['',5,'#ffffff'],
        ['',5,'#666666'],
        ['', 5,'#cccccc']
    ]); 

    var options = {
        width: 200, 
        height: 240, 
        legend: {
            position: 'none'
        }, 
        chartArea: {
            backgroundColor: 'none'
        }, 
        bar: {
            groupWidth: '100%'
        },
        animation: {
            duration: 1000,
            easing: 'out'
        }
    };

    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));

    function updateChart(value) {
        data.setValue(0, 1, value);
        chart.draw(data, options);
    }

    // create slider
    var sliderBarOne = Titanium.UI.createSlider({
        top: '310',
        left: '610',
        min: '0',
        max: '10',
        width: '37%',
        value: '5',
        backgroundImage: 'assets/sliderBar.png'
    });

    sliderBarOne.addEventListener('change', function(e) {
        updateChart(e.value);
    });

    chart.draw(data, options);
}