Анимация диаграммы столбцов из диаграмм Google

Question

У меня возникли проблемы с функцией, которая будет анимировать одну колонку внутри моей диаграммы, когда я использую ползунок, идущий вперед и назад .. левый и правый. Я прочитал в документации по API Google Charts API, но мне сложно понять, что мне нужно делать.

Вот мой код. Где бы я начал выяснять, как оживить только один из моих баров, используя слайдер, который я сделал в титане? Я вызываю функцию updateChart() из моего файла app.js, используя функцию evalJS. Я подтвердил, что он работает, выполнив console.log, когда мой слайдер идет туда и обратно. Мне просто не кажется, что я обволакиваю его, как применить это к анимации одной столбцовой панели. Любые мысли оцениваются.

Настройте диаграммы Google на моей странице 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); 
     } 

EDITED КОД:

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

Slider Hook код в отдельном файле (app.js) Титан Платформа

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