点击重新绘制谷歌图表

Google chart redraw onclick

本文关键字:谷歌 绘制 新绘制      更新时间:2023-09-26

我试图通过各种下拉菜单和日期选择器使数据可选择的图表。我似乎找不到一种方法来传递单击事件上的图表中的新数据。我让它工作到现在,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);
}
});

把你的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);
    });
});