使用谷歌图表绘制堆积条形图

Question

I have this script which should plot stacked google chart from the json data kept at wwwroot -我有这个脚本，它应该从保存在 wwwroot 的 json 数据中绘制堆叠的谷歌图表 -

     <html>
<head>
    <title>DevOps Monitoring Application</title>
    <link rel="icon" type="image/png" href="https://icons.iconarchive.com/icons/martz90/circle/256/plex-icon.png" />
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <style>
        tr > th::first-line {
            font-size: 1.5em;
            font-weight: bolder;
            text-decoration: underline;
        }
    </style>
    <script type="text/javascript">
        google.charts.load("current", {
            packages: ["corechart"]
        }).then(function () {
            $.ajax({
                type: "GET",
                url: "http://localhost/TestExecutionResult.json",
                dataType: "json"
            }).done(function (jsonData) {

                var data = new google.visualization.DataTable();
                data.addColumn('string', 'Task');
                data.addColumn('number', 'Test case execution time');

                $.each(jsonData, function (key, value) {
                    data.addRow([key, parseInt(value)]);
                });


                var options = {
                    title: 'DevOps Monitoring Chart',
                    isStacked: true,
                    legend: { position: 'bottom', maxLines: 3, textStyle: { fontSize: 6 } },
                    bar: { groupWidth: "50%" },
                    hAxis: {
                        format: 'HH:mm', gridlines: { count: 50 },
                        slantedText: false, slantedTextAngle: 45, textStyle: { fontSize: 11 }
                    },
                    vAxis: {
                        title: 'Total execution time (seconds)',
                        viewWindow: {
                            max: 30,
                            min: 0
                        }
                    }
                };

                var chart = new google.visualization.ColumnChart(document.getElementById('barchart'));
                chart.draw(data, options);
            }).fail(function (jqXHR, status, errorThrown) {
                console.log(jqXHR, status, errorThrown)
                // add fail callback
                alert('error: ' + errorThrown);
            });
        });
    </script>

   
</head>

<body>
    <table border="1">
        <tr>
            <td>
                <ul class="breadcrumb">
                    <li>
                        <u><a href="https://example/TestExecutionResultPOD1.zip">Logs</a></u>
                    </li>
                    <li>
                        <u><a id="Release link">Release Link</a></u>
                    </li>
                    <li>
                        <h id="TestLogFileName">
                            Last 5 Results: <select>
                                <option value="--Select Results--">--Select Results--</option>
                                <option value="Test Run at 9:30am">Test Run at 9:30am</option>
                                <option value="Test Run at 9:00am">Test Run at 9:00am</option>
                                <option value="Test Run at 8:30am">Test Run at 8:30am</option>
                                <option value="Test Run at 8:00am">Test Run at 8:00am</option>
                                <option value="Test Run at 7:30am">Test Run at 7:30am</option>
                            </select>
                        </h>
                    </li>

                </ul>
                <div id="LastSuccessfulRun" style="font-size:12px;color:green;margin-top: -15px;margin-bottom: 10px;padding-left: 5px;">Last successful run at: 06-03-2022 09:43:31</div>
                <div id="barchart" style="width: 1000px; height: 600px"></div>
            </td>
    </table>
</body>
</html>

The json file has following data - json 文件具有以下数据 -

   {"NewAdvisorAccountCreation":4,"AccountActivation":13,"OrganizationCreationForAdvisor":31,"AddingWidgetForDashboard":0}

But its plotting a simple column chart and not a stacked column chart.但它绘制一个简单的柱形图而不是堆积柱形图。 How do I populate a single column chart with these 4 values stacked over one another in different colors.如何使用这 4 个值以不同颜色相互堆叠来填充单个柱形图。 The legend should have the 4 json keys plotting the 4 json values.图例应该有 4 个 json 键绘制 4 个 json 值。 Any help, pointers indicators would be much appreciated.任何帮助，指针指标将不胜感激。 Thank you in advance!先感谢您！

Answer 1

The problem is that you are creating one row for each "column".问题是您正在为每个“列”创建一行。

I think this code will work for you:我认为这段代码对你有用：

var columns = ['Test Execution'], row = ["test execution X"];

$.each(jsonData, function (key, value) {
    columns.push(key);
    row.push(value);
});

var data = google.visualization.arrayToDataTable([
    columns,
    row,
]);

Your json is the data for a single row.您的 json 是单行的数据。 So we label that row (on my example "test execution X") and loop over the json to add columns and values for each entry on that json.因此，我们标记该行（在我的示例“测试执行 X”中）并循环遍历 json 以为该 json 上的每个条目添加列和值。

使用谷歌图表绘制堆积条形图

问题描述

1 个解决方案

解决方案1
1 已采纳 2022-06-06 15:51:08

使用谷歌图表绘制堆积条形图

问题描述

1 个解决方案

解决方案1 1 已采纳 2022-06-06 15:51:08

解决方案1
1 已采纳 2022-06-06 15:51:08