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

【问题标题】：Plotting stacked bar chart using google charts使用谷歌图表绘制堆积条形图
【发布时间】：2022-06-13 05:30:16
【问题描述】：

我有这个脚本，它应该从保存在 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>

json文件有以下数据-

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

但它绘制的是一个简单的柱形图而不是堆积柱形图。如何使用这 4 个值以不同颜色堆叠在一起填充单个柱形图。图例应该有 4 个 json 键绘制 4 个 json 值。任何帮助，指针指标将不胜感激。提前谢谢！

【问题讨论】：

当您在浏览器中加载此 url http://localhost/TestExecutionResult.json 时会发生什么？看来您获取 json 的 ajax 调用失败了
我看到如上图所示的 json 数据
在警报前添加 console.log(jqXHR, status, errorThrown) 以查看错误。或者检查你的网络标签，看看那个 http 请求有什么问题
我看到了，我收到了 CORS 错误，但是当我点击 json 数据时，它会显示值
@Diogo Gomes：我现在已经解决了 CORS 问题，你能再检查一下问题吗，我已经更新了。谢谢！

标签： javascript ajax charts google-visualization

【解决方案1】：

问题是您要为每个“列”创建一行。

我认为这段代码对你有用：

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,
]);

您的 json 是单行的数据。因此，我们标记该行（在我的示例“测试执行 X”中）并循环遍历 json 以为该 json 上的每个条目添加列和值。

【讨论】：