0

我有一个j2html脚本，一个函数如下所示：

    public static String homepage(){
        HashMap<String, JSONObject> db_data = functionHandler.callDB();
        return html( styleWithInlineFile("/style.css"),script().withSrc("https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.2/chart.js"),
                title("CLM Dashboard"),
                body(

                                        scriptWithInlineFile("script.js"),
                                        div(
                                        canvas().withId("myChart").withStyle("width:100%;max-width:500px")
                                )


                ).withClass("content")
        )
        .render();
    }

db_data 是一个 Hashmap，其中包含类似这样的总线类型（例如：“ac”：200、“non-ac”：100）。现在我想将其显示为条形图。我有 chart.js，我也有我的 script.js，其中所有默认值都是从 chart.js 网站中的示例硬编码的。这就是我的脚本的外观（script.js）：

const ctx = document.getElementById('myChart').getContext('2d');
console.log(ctx)
const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

如何将 Hashmap 发送到 js 文件并从中构建图表？我希望图表是根据 db_data 中的值构建的。

4

0 回答 0