Question

我有一个这样的JavaScript映射。.

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

和一个JS函数来调用堆积图栏。在这里，我创建了一个JS函数，该函数从jsp页面获取id和一个映射。地图结构与上述定义相同。我想显示一个图，其中x轴的数据是地图中的键，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轴上显示标签...但是图形值不显示，并且出现以下错误。

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>

图表Js堆积条形图没有显示值？

1 个答案: