Question

我想在Google图表中添加互动功能。我计划在我的Google图表中使用addListener，这样当用户点击饼图时，它会绘制另一个图表。我对Google Visualization并不十分熟悉，而且编码的实际技能也很差，因此我想确保在继续绘制另一个图表之前，我可以让Google提供的示例正常工作。

但是，当我按照Google开发人员文档中提供的部分代码段示例进行操作时，该图表不会显示在我的网页中。数据是使用PHP数据库中的PHP获取的。

这是我的图表代码。

        //Chart (Hardest Topics decided by Students)
        google.setOnLoadCallback(drawChart);
        function drawChart() {

        // Create our data table out of JSON data loaded from server.
        var data = new google.visualization.DataTable(<?=$jsonTable?>);

        var options = {
            title: 'Students survey on "Hardest Topics"',
            is3D: 'true'
        };
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));

        function selectHandler() {
            var selectedItem = chart.getSelection()[0];
            if (selectedItem) {
                var value = data.getValue(selectedItem.row, selectedItem.column);
                alert('The user selected ' + value);
            }
        }

        google.visualiation.events.addListener(chart, 'select', selectHandler);
        chart.draw(data, options);
    }

这是我的PHP代码，它连接到mySQL并用我的数据填充我的图表

            //MySQL query start
            $sql="SELECT * 
            FROM googlechart";
            //MySQL query end

            //Result start
            $result = mysqli_query($con,$sql) or die(mysqli_error($con));
            //Result end

            //Rows start
            $rows = array();
            //Rows end

            $flag = true;

            //Table start
            $table = array();
            //Table end

            //Table Column array start
            $table['cols'] = array(

                // Labels for your chart, these represent the column titles
                // Note that one column is in "string" format and another one is in "number" format as pie chart only required "numbers" for calculating percentage and string will be used for column title
                array('label' => 'Weekly Task', 'type' => 'string'),
                array('label' => 'Percentage', 'type' => 'number')

            );
            //Table Column array end

            //Table Row array start
            $rows = array();
            while($r = mysqli_fetch_assoc($result)) {
                $temp = array();
                // the following line will be used to slice the Pie chart
                $temp[] = array('v' => (string) $r['weekly_task']);

                // Values of each slice
                $temp[] = array('v' => (int) $r['percentage']);
                $rows[] = array('c' => $temp);
            }
            //Table Row array end

            //Table Row start
            $table['rows'] = $rows;
            //Table Row end

            //json start
            $jsonTable = json_encode($table);
            //echo $jsonTable;
            //json end

            ?>

我有一个与我的饼图非常相似的条形图，但没有addListener和selectHandler函数，并且它显示正确。

谷歌可视化 - 添加addListener后不显示谷歌图表

0 个答案: