Событие на нескольких графиках Google

У меня проблема, при использовании события select для диаграмм Google, он использует только один график для события (последний график в цикле 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>

заранее спасибо

Источник

1 ответ

Использование одного обработчика событий с несколькими графиками не сложно, вам просто нужно немного обмануть. Учитывая этот обработчик событий:

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,

Источник
Другие вопросы по тегам