我想在谷歌图表中从 JSON 创建堆叠图表

Question

帮助，我想从谷歌图表中的 JSON 创建堆叠图表，老实说我的问题是 var data = google.visualization.arrayToDataTable([ 这是我的代码

<?php
$tmp = array();

require "configdashboard.php";
/*
select the 3 columns of interest, assinging aliases for laziness purposes
*/
$sql = "SELECT devices.device_id AS device_id, devices.hostname AS hostname, devices.ip, devices.uptime, SUM(storage.storage_used) AS storage_used, SUM(storage.storage_free) AS storage_free , storage.storage_descr AS storage_descr
    FROM storage 
            INNER JOIN devices ON storage.device_id = devices.device_id GROUP BY devices.device_id, storage.storage_descr";

$conn = mysqli_connect('localhost', 'root', '', 'monitoring');
$query = mysqli_query($conn, $sql);
$fetch = mysqli_fetch_assoc($query);
if ($stmt = $connection->query($sql)) {
    while ($row = $stmt->fetch_assoc()) {
        /* Add each row with named columns - which makes working with the JSON in Javascript easier IMO */
        $tmp[] = array(
            'device_id'    =>  $row['device_id'],
            'storage_used'  =>  $row['storage_used'],
            'storage_free'  =>  $row['storage_free'],
            'hostname'  =>  $row['hostname'],
            'storage_descr'  =>  $row['storage_descr']
        );
    }
}

# create the JSON string
$json = json_encode($tmp);
//$json=json_encode( $fetch );
//print_r ($json);
?>

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>
    var my_2d = <?php echo $json; ?>;

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

    function drawChart() {
        if (Object.keys(my_2d).length > 0) {
            for (i = 0; i < my_2d.length; i++) {
                var data = google.visualization.arrayToDataTable([
                    ['Task', 'Server Devices ' + my_2d[i].device_id + ' ' + my_2d[i].hostname],
                    ['Used', parseInt(my_2d[i].storage_used)],
                    ['Free', parseInt(my_2d[i].storage_free)]
                ]);

                var options_fullStacked = {
                    isStacked: 'percent',
                    height: 300,
                    legend: {
                        position: 'top',
                        maxLines: 2
                    },
                    hAxis: {
                        minValue: 0,
                        ticks: [0, .3, .6, .9, 1]
                    }
                };

                var table = document.getElementById("table_chart");
                if (i % 2 == 0) {
                    var tr = document.createElement("tr");
                    tr.setAttribute("class", "row_chart")
                    table.appendChild(tr)
                }
                var row_charts = document.getElementsByClassName("row_chart")

                var td = document.createElement("td");
                var div = document.createElement("div")
                div.setAttribute("id", 'chart_div_' + i)
                div.setAttribute("style", 'width: auto; height: auto; display: block; margin: auto;')

                var lastTr = row_charts.length - 1
                row_charts[lastTr].appendChild(td)
                td.appendChild(div)

                var chart = new google.visualization.BarChart(div);

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

这是我的数据库

我想像这样创建 *note /, /run 等是 storage_descr

但我现在的输出是

Answer 1

看起来您有两个独立的系列，二手和免费。您希望将一个系列作为堆叠条。

尝试按照他们是否在此处对表格和图表设置进行抽样： https://developers.google.com/chart/interactive/docs/gallery/barchart

var options = {
        width: 600,
        height: 400,
        legend: { position: 'top', maxLines: 3 },
        bar: { groupWidth: '75%' },
        isStacked: true
      };