多个谷歌图表上的事件

Event on multiple google charts

本文关键字：事件 谷歌      更新时间：2023-10-06

我有一个问题，当为谷歌图表使用select事件时，它只为该事件使用一个图表（for循环中的最后一个图表）。有没有办法将同一事件绑定到多个图表上？

这是我的代码：您可以看到，我为每个饼图添加了一个选择侦听器，但只有最后一个饼图（页面上）会发出警报。

<!DOCTYPE html>
<head>
    <?php require_once 'header.php'; ?>
    <?php
    class typeChart {
        public $type;
        public $function;
        public $addit;
        public $title;
        public $jscript;
        public function __construct($type, $string, $title, $additional = 0) {
            $this->type = $type;
            $this->function = "report/" . $string;
            $this->addit = $additional;
            $this->title = $title;
            $this->jscript = $string;
        }
    }
    $arr = array();
    array_push($arr, new typeChart('table', 'getDataProjects', 'Data Projects'));
    array_push($arr, new typeChart('pie', 'getStatusProjects', 'Status Projects', 1));
    array_push($arr, new typeChart('pie', 'getTypeProjects', 'Type Projects', 1));
    array_push($arr, new typeChart('pie', 'getBillingProjects', 'Billing Projects', 1));
    array_push($arr, new typeChart('pie', 'getTypeFinance', 'Type Finance'));
    array_push($arr, new typeChart('pie', 'getTypeInterventions', 'Type Interventions'));
    array_push($arr, new typeChart('bar', 'getCompletedYear', 'Completed Year'));
    array_push($arr, new typeChart('pie', 'getLeadTimeProjects', 'LeadTime Projects'));
    array_push($arr, new typeChart('pie', 'getDeadlineInvoicing', 'Deadline Invoicing'));
    ?>
    <script type="text/javascript">

        google.load("visualization", "1", {packages: ["corechart,table"]});
        google.setOnLoadCallback(drawChart);
        function drawChart() {
<?php
$counter = 0;
?>
<?php foreach ($arr as $res) { ?>
    <?php
    $counter++;
    $datatable = 'dataTable' . $counter;
    ?>
                function selectHandler(myChart) {
                    var selectedItem = myChart.getSelection()[0];
                    if (selectedItem) {
                        var topping = <?php echo $datatable; ?>.getValue(selectedItem.row, 0);
                        alert(topping);
                    }
                }
                var jsonData = $.ajax({
                    url: "<?php echo site_url($res->function); ?>",
                    dataType: "json",
                    async: false
                }).responseText;


                var <?php echo $datatable; ?> = new google.visualization.DataTable(jsonData);
                var options = {
                    title: '<?php echo $res->title; ?>'
                };

                $("#charts").append('<table>');
    <?php if ($res->type == 'table') { ?>
                    $("#charts").append('<tr><td><div id="<?php echo $res->title; ?>" style="width: 700px; height: 300px; margin: 0 auto;"></div></td></tr>');
                    var <?php echo $res->jscript; ?> = new google.visualization.Table(document.getElementById('<?php echo $res->title; ?>'));
                    google.visualization.events.addListener(<?php echo $res->jscript; ?>, 'select', function() {
                        selectHandler(<?php echo $res->jscript; ?>);
                    });
        <?php echo $res->jscript; ?>.draw(<?php echo $datatable; ?>, options);
    <?php } ?>
    <?php if ($res->type == 'pie') { ?>
                    $("#charts").append('<td><div id="<?php echo $res->title; ?>" style="width: 700px; height: 300px;"></div></td>');
                    var <?php echo $res->jscript; ?> = new google.visualization.PieChart(document.getElementById('<?php echo $res->title; ?>'));

                    google.visualization.events.addListener(<?php echo $res->jscript; ?>, 'select', function() {
                        selectHandler(<?php echo $res->jscript; ?>);
                    });
        <?php echo $res->jscript; ?>.draw(<?php echo $datatable; ?>, options);
        <?php
        if ($res->addit == 1) {
            $bar = $res->title . 'Bar';
            ?>
                        $("#charts").append('<td><div id="<?php echo $bar; ?>" style="width: 700px; height: 300px;"></div></td></tr>');
                        var x = new google.visualization.ColumnChart(document.getElementById('<?php echo $bar; ?>'));
                        x.draw(<?php echo $datatable; ?>, options);
                        google.visualization.events.addListener(<?php echo $res->jscript; ?>, 'select', function() {
                            selectHandler(<?php echo $res->jscript; ?>);
                        });
        <?php } else { ?>
        <?php } ?>



    <?php } ?>

<?php } ?>
            $("#charts").append('</table>');


        }



    </script>
</head>
<body>

    <div id='cssmenu'>
        <ul>
            <li><a href="<?php echo site_url('home/index'); ?>"><span>HOME</span></a></li>
            <li><a href="<?php echo site_url('manage/index'); ?>"><span>MANAGE</span></a></li>
            <li class='active'><a href="<?php echo site_url('report/index'); ?>"><span>REPORT</span></a></li>
            <li style="float: right"><a href="<?php echo site_url('login/logout'); ?>"><span>LOGOUT</span></a></li>
        </ul>
    </div>

    <table id="charts">


    </table>

</body>
</html>

提前感谢

在多个图表中使用单个事件处理程序并不困难，只需要作弊一点。给定此事件处理程序：

function selectHandler(myChart) {
    var selectedItem = myChart.getSelection()[0];
    if (selectedItem) {
        var topping = data.getValue(selectedItem.row, 0);
        alert(topping);
    }
}

您需要使用一个自定义函数来设置事件，该函数调用selectHandler并在图表中传递：

google.visualization.events.addListener(myChart1, 'select', function () {
    selectHandler(myChart1);
});
google.visualization.events.addListener(myChart2, 'select', function () {
    selectHandler(myChart2);
});

您的代码会有点复杂，因为您不仅有多个图表，而且还有多个DataTables（在当前版本的代码中被覆盖）。您需要修复变量命名，然后将DataTable和图表作为参数传递给selectHandler。

相关文章：