如何显示树状地图图表从谷歌图表使用php

How to show Treemap chart from Google chart using php?

本文关键字:谷歌 php 地图 何显示 显示      更新时间:2023-09-26

当我想在浏览器中显示我的树状图时,我遇到了问题。当我调用testingTreemap.php时,浏览器没有显示任何内容,只有标题。我不知道如何将我的数据设置为树形图中的值。

这是我的testingTreemap.php
google.charts.load('current', {'packages':['treemap']});
google.charts.setOnLoadCallback(drawChart);
    function drawChart(){

        //var dataFromPHP = <?php echo file_get_contents('clientdata.json'); ?>;
        $dataFromPHP = file_get_contents('clientdata.json');
        $json = json_decode($dataFromPHP, TRUE);
        // console.log(dump_dataFromPHP);
        $provinsi = 'SELECT provinsi , LEFT(provinsi, '') AS lala FROM data_client';
        $query = 'SELECT provinsi ,kode_sales, gaji, count(kode_sales) AS T_nasabah FROM data_client GROUP BY kode_sales';
        //var newData = [];
        ['Location', 'Parent' , 'Size', 'Color'];
        $exec = mysqli_query($con,$query);
        $execProv = mysqli_query($con,$provinsi);
        echo "['".$row['lala']."'," null, 0, 0"],";
        while($row = mysqli_fetch_array($execProv)){ 
        echo "['".$row['provinsi']."','".$row['lala']."',"0,0"],";
        }
        while($row = mysqli_fetch_array($exec)){ 
        echo "['".$row['kode_sales']."','".$row['provinsi']."',".$row['gaji'].",".$row['T_nasabah']."],";
        }
        //console.log(dataFromPHP);
        console.log((data));
        tree = new google.visualization.TreeMap(document.getElementById('chart_div'));
        tree.draw(data, {
          minColor: '#f00',
          midColor: '#ddd',
          maxColor: '#0d0',
          headerHeight: 15,
          fontColor: 'black',
          showScale: true
        });
        chart.draw(data, options);  
        }
        })

总是得到"SyntaxError: missing;在这行(顺便说一句,我得到这行后,我运行php文件,从谷歌Chrome>右键单击>检查元素>控制台)

function drawChart(){
        //var dataFromPHP = [
{
    "kode_client": "CLI01", <<<------- SyntaxError: missing ; before statement
    "nama": "Edo",
    "tanggal_lahir": "01'/05'/1967",
    "alamat": "Nusa Hijau",
    "telp": "085634234",
    "produk": "Titanium",
    "gaji": "5000000",
    "cabang": "Bandung",
    "provinsi": "Jawa Barat",
    "kode_sales": "CLI02"
},
{
    "kode_client": "CLI02",
    "nama": "Santoso Imam",
    "tanggal_lahir": "15'/12'/1979",
    "alamat": "Padasuka",
    "telp": "08513087645",
    "produk": "Investra Link",
    "gaji": "4500000",
    "cabang": "Cimahi",
    "provinsi": "Jawa Tengah",
    "kode_sales": "SAL04"
}

在加载google charts时建议使用以下库…

<script src="https://www.gstatic.com/charts/loader.js"></script>

,如果使用loader.js加载语句是不正确的…

google.charts.load('visualization', {packages:['treemap']}); //<-- wrong

应该……

google.charts.load('current', {'packages':['treemap']});

第一个参数应该是加载

的版本。

当使用旧的jsapi库时,
load语句看起来像这样…

google.load('visualization', '1', {packages:['treemap']});

但是根据发行说明

通过jsapi加载器仍然可用的Google Charts版本不再持续更新。

编辑

这一行是不正确的…

echo "['".$row['provinsi']."','".$row['lala']."',"0,0"],";

改变……

echo "['".$row['provinsi']."','".$row['lala']."',0,0],";