Charts Js Stacked Bar Graph 顯示沒有值？

Question

我有一個這樣的 javascript map..

var Severity = {
3M:[0, 3, 1, 0, 0],
5T:[0, 0, 1, 0, 0],
6S:[0, 0, 2, 0, 0]
}

還有一個 JS function 調用 Stacked Chart Bar。 在這里，我創建了一個 JS function，它從 jsp 頁面獲取 id 和 map。 Map 結構同上定義。 我想顯示圖表，其中 x 軸上的數據是 map 中的鍵，y 軸上是 5 個元素的堆疊數據。

function StackedBar(id,Severity) {

    var label = Object.keys(Severity); // getting the labels

    var Critical = [];
    var High = [];
    var Medium = [];
    var Low = [];
    var Others = [];


    for(let i=0;i<label.length;i++){    //assigning the data to arrays created
        Critical.push(Severity[label[i]][0]);
        High.push(Severity[label[i]][1]);
        Medium.push(Severity[label[i]][2]);
        Low.push(Severity[label[i]][3]);
        Others.push(Severity[label[i]][4]);
    }

    var ctxL = document.getElementById(id).getContext('2d');   //id from the html canvas
    var chart = new Chart(ctxL, {
        type: 'bar',
        data: {
            labels: label, 
            datasets: [
                {
                label: 'Critical',
                data: Critical,
                backgroundColor: '#aa000e'
            },
                {
                label: 'High',
                data: High,
                backgroundColor: '#e65905'
            },
                {
                label: 'Medium',
                data: Medium,
                backgroundColor: '#e00ce6'
            },
                {
                label: 'Low',
                data: Low,
                backgroundColor: '#b8ab16'
            },
                {
                label: 'Others',
                data: Others,
                backgroundColor: '#00aaaa'
            }
            ]
        },
        options: {
            responsive: true,
            legend: {
                position: 'right' 
            },
            scales: {
                xAxes: [{
                    stacked: true 
                }],
                yAxes: [{
                    stacked: true 
                }]
            }
        }
    });
}

此處顯示圖表，我在 x 軸上得到 label...但圖表值未顯示，我收到以下錯誤...

Html

<canvas id="overall"></canvas>
<script>StackedBar('overall',Overall);</script>

我想知道出了什么問題，並希望我能幫助解決這個問題......

Answer 1

我將以上內容放在一個文件中並且它有效（盡管我必須在通話中將“總體”更改為“嚴重性”）。 所以我希望您使用的東西可能與上面的示例不匹配。

我使用的版本：

<html>
<body>
    <canvas id="overall"></canvas>
</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<script>
    var Severity = {
        "3M": [0, 3, 1, 0, 0],
        "5T": [0, 0, 1, 0, 0],
        "6S": [0, 0, 2, 0, 0]
    };
</script>
<script>
    function StackedBar(id, Severity) {

        var label = Object.keys(Severity); // getting the labels

        var Critical = [];
        var High = [];
        var Medium = [];
        var Low = [];
        var Others = [];


        for (let i = 0; i < label.length; i++) {    //assigning the data to arrays created
            Critical.push(Severity[label[i]][0]);
            High.push(Severity[label[i]][1]);
            Medium.push(Severity[label[i]][2]);
            Low.push(Severity[label[i]][3]);
            Others.push(Severity[label[i]][4]);
        }

        var ctxL = document.getElementById(id).getContext('2d');   //id from the html canvas
        var chart = new Chart(ctxL, {
            type: 'bar',
            data: {
                labels: label,
                datasets: [
                    {
                        label: 'Critical',
                        data: Critical,
                        backgroundColor: '#aa000e'
                    },
                    {
                        label: 'High',
                        data: High,
                        backgroundColor: '#e65905'
                    },
                    {
                        label: 'Medium',
                        data: Medium,
                        backgroundColor: '#e00ce6'
                    },
                    {
                        label: 'Low',
                        data: Low,
                        backgroundColor: '#b8ab16'
                    },
                    {
                        label: 'Others',
                        data: Others,
                        backgroundColor: '#00aaaa'
                    }
                ]
            },
            options: {
                responsive: true,
                legend: {
                    position: 'right'
                },
                scales: {
                    xAxes: [{
                        stacked: true
                    }],
                    yAxes: [{
                        stacked: true
                    }]
                }
            }
        });
    }
</script>
<script>StackedBar('overall', Severity);</script>

</html>

Charts Js Stacked Bar Graph 顯示沒有值？

問題描述

1 個解決方案

解決方案1
1 已采納 2020-07-28 09:17:40

Charts Js Stacked Bar Graph 顯示沒有值？

問題描述

1 個解決方案

解決方案1 1 已采納 2020-07-28 09:17:40

解決方案1
1 已采納 2020-07-28 09:17:40