Question

嘿所有我有以下代码的谷歌饼图从jsontable获取数据我想要当我点击一个切片根据选择重绘图表。

我有以下代码，我不知道如何继续

<head>
    <style>
        div.absolute {
            position: absolute;
            top: 120px;
        }
    </style>
    <link href="style.css" rel="stylesheet" />

    <!--Auto refresh code -->
    <meta http-equiv="refresh" content="<?php echo $sec?>;URL='<?php echo $page?>'">

    <!--Load the Ajax API-->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="https://www.google.com/jsapi"></script>
    <script src="http://www.google.com/jsapi?ext.js"></script>
    <script src="https://rawgit.com/louisremi/jquery-smartresize/master/jquery.throttledresize.js"></script>
    <script>
        google.load('visualization', '1', {'packages':['corechart']});
        google.setOnLoadCallback(initChart);

        $(window).on("throttledresize", function (event) {
          initChart();
        });

        function initChart() {
            var options = {
                title: 'Arrived Today (Email)',
                width: '100%',
                height: '100%',
                sliceVisibilityThreshold: 0,
                pieSliceText: 'percentage',
                pieStartAngle: 100,
                //is3D: 'true',
                pieHole: 0.3,
                slices: {
                   1: {offset: 0.2},
                   2: {offset: 0.3},
                   3: {offset: 0.4},
                   4: {offset: 0.5},
                   5: {offset: 0.6},
                },
                //slices: {0: {color: 'green'}, 1: {color: 'blue'}},
                pieSliceBorderColor: 'black',
                legend: 'right',
                legendTextStyle: {fontSize: 15},
                pieSliceText: 'value' ,
                titleTextStyle: {
                    color: '333333',
                    fontName: 'Arial',
                    fontSize: 14 ,
                    align:'right'
                },
                chartArea : { left: 35 }
            };

            var data = new google.visualization.DataTable(<?=$jsonTable?>);
            var data2 = new google.visualization.DataTable(<?=$jsonTable2?>);

            var total = google.visualization.data.group(data,
                [{
                    type: 'boolean',
                    column: 0,
                    modifier: function () {return true;}
                }],
                [{
                    type: 'number',
                    column: 1,
                    aggregation: google.visualization.data.sum
                }]
            );

            document.getElementById("demo").innerHTML =total.getValue(0,1);
            data.addRow(['Total: ' + total.getValue(0, 1), 0]);
            drawChart(data, options)
        }

        function drawChart(data, options) {
            var chart = new google.visualization.PieChart(document.getElementById('chart'));
            chart.draw(data, options);
            google.visualization.events.addListener(chart, 'select', selectHandler);
            var label1 = data.pieSliceText('label');

            // The selection handler.
            // Loop through all items in the selection and concatenate
            // a single message from all of them.
            function selectHandler() {
                var selection = chart.getSelection();
                if (selection.length) {
                    var pieSliceLabel = data.getValue(selection[0].row, 0);
                    if (pieSliceLabel = 'External')
                    chart.draw(data2, options);
                }
            }
        }
    </script>
</head>
<body>
    <h2 align="right"><font size="5">emails Arrived Today</font>
    <div id="demo"></div>
    </h2>
    <div id="chart"></div>
</body>

提前感谢任何帮助：）

Answer 1

function initChart() {
....          
   var data = new google.visualization.DataTable(<?=$jsonTable?>);
   var data2 = new google.visualization.DataTable(<?=$jsonTable2?>);
....
}

function drawChart(data, options) {

    google.visualization.events.addListener(chart, 'select', selectHandler);

    function selectHandler() {
        var selection = chart.getSelection();
        if (selection.length) {
            var pieSliceLabel = data.getValue(selection[0].row, 0);
            if (pieSliceLabel = 'External')
                chart.draw(data2, options);
            }
        }
    }

除了变量data2的范围外，一切看起来都很好。您可以在函数initChart()中启动它，然后尝试在drawChart()的子函数中使用它。

您可以在任何javascript函数之外定义var data2，或者在调用drawChart时将其作为参数传递。

包含新数据的精选活动重绘图表上的Google图表

1 个答案: