Google 图表重绘 onclick

Question

我正在尝试制作一个图表，可以通过各种下拉菜单和日期选择器从中选择数据。我似乎无法找到一种方法来在单击事件的图表中传递新数据。到目前为止，我让它工作到 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);

    });
});

Google 图表重绘 onclick

Google chart redraw onclick

javascript

jquery

charts

google-visualization

drop-down-menu