Google chart redraw onclick

Question

Я пытаюсь создать диаграмму, из которой данные можно выбрать с помощью различных выпадающих меню и селектора дат. Кажется, я не могу найти способ передать новые данные в диаграмме на событие click. Я до сих пор работаю, что onClick, он рисует целый новый график. Но для меня это не похоже.

Так есть ли другой способ сделать это? HTML:

<div id="piechart" style="width: 450px; height: 500px;"></div> 
    <div class="date-selector-container"> 
     <div class="btn-group"> 
      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> 
         Jaar <span class="caret"></span> 
      </button> 
      <ul class="dropdown-menu" role="menu"> 
       <li><a class="2015-btn" href="#">2015</a></li> 
       <li><a href="#">2014</a></li> 
       <li><a href="#">2013</a></li> 
      </ul> 
</div> 

JS:

google.load("visualization", "1", {packages:["corechart"], "callback": drawChart}); 
google.setOnLoadCallback(drawChart); 

function drawChart() { 

var data = google.visualization.arrayToDataTable([ 
    ['Task', 'Hours per Day'], 
    ['Work',  1], 
    ['Eat',  22], 
    ['Commute', 32], 
    ['Watch TV', 42], 
    ['Sleep', 75] 
]); 

var options = { 

    chartArea: {width:'100%',height:'100%'}, 

    forceIFrame: 'false', 

    is3D: 'true', 

    pieSliceText: 'value', 

    sliceVisibilityThreshold: 1/20, // Only > 5% will be shown. 

    titlePosition: 'none' 

}; 


var chart = new google.visualization.PieChart(document.getElementById('piechart')); 

chart.draw(data, options); 
} 


}); 

//On button click, load new data 
$(".2015-btn").click(function(){ 
google.load("visualization", "1", {packages:["corechart"], "callback": drawChart}); 
google.setOnLoadCallback(drawChart); 

function drawChart() { 

var data = google.visualization.arrayToDataTable([ 
    ['Task', 'Hours per Day'], 
    ['Work',  11], 
    ['Eat',  2], 
    ['Commute', 2], 
    ['Watch TV', 2], 
    ['Sleep', 7] 
]); 

var options = { 

    chartArea: {width:'100%',height:'100%'}, 

    forceIFrame: 'false', 

    is3D: 'true', 

    pieSliceText: 'value', 

    sliceVisibilityThreshold: 1/20, // Only > 5% will be shown. 

    titlePosition: 'none' 

}; 


var chart = new google.visualization.PieChart(document.getElementById('piechart')); 

chart.draw(data, options); 
} 
}); 

Answer 1

Меняйте JS выглядеть, как показано ниже.

Создайте переменную диаграммы за пределами функции drawChart и вместо того, чтобы создавать новую диаграмму, используйте везде, где у вас уже есть.

Рабочий пример здесь jsfiddle

google.load("visualization", "1", {packages:["corechart"], "callback": drawChart}); 
google.setOnLoadCallback(drawChart); 

var chart; 

function drawChart() { 

    var data = google.visualization.arrayToDataTable([ 
     ['Task', 'Hours per Day'], 
     ['Work',  1], 
     ['Eat',  22], 
     ['Commute', 32], 
     ['Watch TV', 42], 
     ['Sleep', 75] 
    ]); 

    var options = { 

     chartArea: {width:'100%',height:'100%'}, 

     forceIFrame: 'false', 

     is3D: 'true', 

     pieSliceText: 'value', 

     sliceVisibilityThreshold: 1/20, // Only > 5% will be shown. 

     titlePosition: 'none' 

    }; 


    chart = new google.visualization.PieChart(document.getElementById('piechart')); 

    chart.draw(data, options); 
} 


$(document).ready(function(){ 
//On button click, load new data 
    $(".2015-btn").click(function() { 

     var data = google.visualization.arrayToDataTable([ 
      ['Task', 'Hours per Day'], 
      ['Work', 11], 
      ['Eat', 2], 
      ['Commute', 2], 
      ['Watch TV', 2], 
      ['Sleep', 7] 
     ]); 

     var options = { 

      chartArea: { width: '100%', height: '100%' }, 

      forceIFrame: 'false', 

      is3D: 'true', 

      pieSliceText: 'value', 

      sliceVisibilityThreshold: 1/20, // Only > 5% will be shown. 

      titlePosition: 'none' 

     }; 
     chart.draw(data, options); 

    }); 
});