精選活動中的Google Charts重繪帶有新數據的圖表

Question

嘿，我下面有一個Google餅圖的代碼，該代碼從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時將其作為參數drawChart 。

精選活動中的Google Charts重繪帶有新數據的圖表

問題描述

1 個解決方案

解決方案1
0 已采納 2015-12-15 13:21:23

精選活動中的Google Charts重繪帶有新數據的圖表

問題描述

1 個解決方案

解決方案1 0 已采納 2015-12-15 13:21:23

解決方案1
0 已采納 2015-12-15 13:21:23