堆栈内存溢出
  繁体   English   中英

在页面上创建多个google.visualization图表

[英]Create Multiple google.visualization Charts on a Page

 原文  2015-07-26 03:27:28  5   1    javascript/ php/ jquery/ html/ google-visualization

问题描述

我有一个使用Google可视化代码生成的图表，请参见此处https://jsfiddle.net/eod8ysm1/

我想在一个电子邮件的表中显示多个图形，因此我将所有HTML数据存储在一个对象（ $tempchartData ）中。 

 $_SESSION["currentclient"] = $salesmengeotypes[1];
 $_SESSION["noanswer"] = "4";
 $_SESSION["declined"] = "5";
 $_SESSION["other"] = 4;

 ob_start();
 include "piecreator.php";
 $out1 = ob_get_clean();
 $tempchartData .= $out1;

但是，它似乎仅适用于一张图表。 有没有办法对多个图表执行此操作？ 它调用的文件： 

<?
$currentclient  =  $_SESSION["currentclient"];
$noanswer  =  $_SESSION["noanswer"];
$declined  =  $_SESSION["declined"];
$other  =  $_SESSION["other"];
?>
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart);
    function drawChart() {
        var data = google.visualization.arrayToDataTable([
            ['Task', 'Hours per Day'],
            ['Signed Up', <? echo $currentclient;?>],
            ['No Answer',  <? echo $noanswer;?>],
            ['Declined',  <? echo $declined;?>],
            ['Other',  <? echo $other;?>]
        ]);

        var options = {
            title: 'Daily Sales Reports'
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

        chart.draw(data, options);
    }
</script>
</head>
<body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
</body>
</html>

1 个解决方案

解决方案1
 1 已采纳  2015-07-26 05:15:42

经过一些修改，您可以制作多个图表： 

<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
    // Let the callback run a function
    google.setOnLoadCallback(function() {
            // Chart data 1
            SetData1    =   [
                                ['Task', 'Hours per Day'],
                                ['Signed Up', 10 ],
                                ['No Answer',  20],
                                ['Declined',  40],
                                ['Other',  30]
                            ];

            // Chart data 2
            SetData2    =   [
                                ['Task', 'Hours per Day'],
                                ['Signed Up', 5 ],
                                ['No Answer',  10],
                                ['Declined',  35],
                                ['Other',  50]
                            ];
            // Pie Chart 1
            drawChart(SetData1,'piechart');
            // Pie Chart 2
            drawChart(SetData2,'piechart2');
        });

    // Give the function some arguments, first is data, second id
    // You could do a third for the options attribute
    function drawChart(ArrayElem,IdElem)
        {
            var data = google.visualization.arrayToDataTable(ArrayElem);
            var options = {
                title: 'Daily Sales Reports'
            };

            var chart = new google.visualization.PieChart(document.getElementById(IdElem));

            chart.draw(data, options);
        }


</script>
</head>
<body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
    <!-- create a drop for chart 2 -->
    <div id="piechart2" style="width: 900px; height: 500px;"></div>
</body>
</html>

jsFiddle演示：

http://jsfiddle.net/vwnsbchh/1/

对于纯PHP解决方案（如果需要一些动态功能），可以使用类从php变量中构建javascript。 我发布的内容按原样提供 ：

更新：此类（已更新为包括散点图/趋势图）可从https://github.com/rasclatt/PHP-to-Google-PieCharts-Converter下载（并仔细检查）。 

<?php
    class   GoogleCharts
        {
            public      $newArr;
            public      $VarName;
            public      $DataArray;

            protected   $id;
            protected   $compiler;

            function CreatePie($settings = false)
                {
                    if(!is_array($settings))
                        return;

                    $data           =   (!empty($settings['data']))? $settings['data']:false;
                    $this->id       =   (!empty($settings['id']))? $settings['id']:false;
                    $incr           =   (!empty($settings['incr']))? $settings['incr']:false;

                    $this->VarName  =   "";
                    $this->newArr   =   array();

                    if($data != false && $this->id != false) {
                            foreach($data as $key => $value) {
                                    $dvalue         =   (is_numeric($value))? $value:"'{$value}'";
                                    $this->newArr[] =   "\t\t\t\t\t['{$key}', {$dvalue}]";
                                }
                        }

                    $this->VarName  =   "DataSet{$incr}";

                    if(!empty($this->newArr)) {
                            $str    =   PHP_EOL."var {$this->VarName}   =   [".PHP_EOL;
                            $str    .=  implode(",".PHP_EOL,$this->newArr).PHP_EOL;
                            $str    .=  "\t\t\t\t]".PHP_EOL;
                        }

                    $this->DataArray    =   (!empty($str))? $str:false;

                    return $this;
                }

            public  function ChartData()
                {
                    $str    =   (!empty($this->DataArray))? $this->DataArray:"";
                    $str    .=  PHP_EOL;

                    return $str;
                }

            public  function ChartInstance()
                {
                    $str    =   (!empty($this->VarName))? "drawChart({$this->VarName},'{$this->id}');":"";
                    $str    .=  PHP_EOL;

                    return $str;
                }

            public  function CreateJavascript($settings = false)
                {
                    $library    =   (!empty($settings['lib']))? $settings['lib']:false;
                    $wrap       =   (!empty($settings['wrap']))? $settings['wrap']:false;
                    $wrap       =   (!empty($settings['data']) && is_array($settings['data']))? $settings['data']:array();

                    if($library)
                        $comp[] =   '<script type="text/javascript" src="https://www.google.com/jsapi"></script>'.PHP_EOL;

                    if($wrap)
                        $comp[] =   '<script type="text/javascript">'.PHP_EOL;

                    $comp[] =   '
google.load("visualization", "1", {packages:["corechart"]});
// Let the callback run a function
google.setOnLoadCallback(function() {';

                    for($i = 0; $i < count($settings['data']); $i++) {
                            $comp[] =   $settings['data'][$i].PHP_EOL;
                        }
                    $comp[] =   '
    });

// Give the function some arguments, first is data, second id
// You could do a third for the options attribute
function drawChart(ArrayElem,IdElem)
    {
        var data = google.visualization.arrayToDataTable(ArrayElem);
        var options = {
            title: \'Daily Sales Reports\'
        };

        var chart = new google.visualization.PieChart(document.getElementById(IdElem));

        chart.draw(data, options);
    }';

                    if($wrap)
                        $comp[] =   '</script>';

                    return implode("",$comp);
                }
        }
?>

使用方法： 

<?php
// Create instance of GoogleCharts class
$Googlizer  =   new GoogleCharts();
?>
<html>
<head>
<?php
// Settings for the first chart
$settings["incr"]               =   1;
$settings["id"]                 =   "piechart".$settings["incr"];
$settings["data"]["Task"]       =   "Hours per Day";
$settings["data"]["Signed Up"]  =   10;
$settings["data"]["No Answer"]  =   20;
$settings["data"]["Declined"]   =   40;
$settings["data"]["Other"]      =   30;

// Create the pie chart
$Googlizer->CreatePie($settings);
// Save the instance of the js data array
$chart1_data    =   $Googlizer->ChartData();
// Save the instance of the js function
$chart1_inst    =   $Googlizer->ChartInstance();

// Reset the settings
$settings                       =   array();

// Create chart 2
$settings["incr"]               =   2;
$settings["id"]                 =   "piechart".$settings["incr"];
$settings["data"]["Task"]       =   "Hours per Day";
$settings["data"]["Signed Up"]  =   5;
$settings["data"]["No Answer"]  =   15;
$settings["data"]["Declined"]   =   25;
$settings["data"]["Other"]      =   55;

// Same as chart 1
$Googlizer->CreatePie($settings);
$chart2_data    =   $Googlizer->ChartData();
$chart2_inst    =   $Googlizer->ChartInstance();

// Write the whole shebangle to the page
echo $Googlizer->CreateJavascript(array("data"=>array($chart1_data, $chart1_inst, $chart2_data, $chart2_inst),"wrap"=>true,"lib"=>true));
?>
</head>
<body>
    <div id="piechart1" style="width: 900px; height: 500px;"></div>
    <!-- create a drop for chart 2 -->
    <div id="piechart2" style="width: 900px; height: 500px;"></div>
</body>
</html>

该类将写入页面： 

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

google.load("visualization", "1", {packages:["corechart"]});
// Let the callback run a function
google.setOnLoadCallback(function() {var DataSet1   =   [
                    ['Task', 'Hours per Day'],
                    ['Signed Up', 10],
                    ['No Answer', 20],
                    ['Declined', 40],
                    ['Other', 30]
                ]


drawChart(DataSet1,'piechart1');

var DataSet2    =   [
                    ['Task', 'Hours per Day'],
                    ['Signed Up', 5],
                    ['No Answer', 15],
                    ['Declined', 25],
                    ['Other', 55]
                ]


drawChart(DataSet2,'piechart2');


    });

// Give the function some arguments, first is data, second id
// You could do a third for the options attribute
function drawChart(ArrayElem,IdElem)
    {
        var data = google.visualization.arrayToDataTable(ArrayElem);
        var options = {
            title: 'Daily Sales Reports'
        };

        var chart = new google.visualization.PieChart(document.getElementById(IdElem));

        chart.draw(data, options);
    }</script>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 页面事件未在google.visualization中触发 类型错误：google.visualization 未定义 类型错误：google.visualization 未定义 google.visualization [$ attr.googleChart]不是构造函数 动态添加到任何Google.Visualization Google可视化循环-返回google.visualization未定义 如何在google.visualization图表中使用javascript数组元素 谷歌可视化多个图表与自己的数据查询 谷歌可视化多个图表 - 选项不起作用 页面上有多个 Google 图表
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM