Google圖表中的動畫柱形圖

Question

當我使用來回滑動滑塊..左右的動畫時，我想不出一個功能來為圖表中的單個列欄設置動畫。我已經閱讀了Google Charts API文檔中的動畫文檔，但是我很難理解我需要做什么。

到目前為止，這是我的代碼。 我應該從哪里開始，如何使用我在鈦合金中制成的滑塊為一根桿制作動畫？ 我使用evalJS函數從我的app.js文件中調用了updateChart()函數。 我已經驗證了它的工作原理，方法是在滑塊來回移動時執行console.log。 我只是似乎無法解決這個問題，如何將其應用於動畫單個欄。 任何想法表示贊賞。

在我的HTML頁面上設置Google圖表。

    <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);
        }

編輯代碼：

    <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(value) {
            data.setValue(0, 1, value);
            chart.draw(data, options);
        }

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

單獨文件（app.js）中的Slider Hook代碼Titanium平台

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 + "');");
});

Answer 1

您需要為調用updateChart函數的滑塊連接事件偵聽器。 updateChart函數應從滑塊獲取值並更改DataTable中的值，然后計算圖表的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);
}