Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/431.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 图表Js堆叠条形图是否不显示值?_Javascript_Html_Chart.js - Fatal编程技术网

Javascript 图表Js堆叠条形图是否不显示值?

Javascript 图表Js堆叠条形图是否不显示值?,javascript,html,chart.js,Javascript,Html,Chart.js,我有一个像这样的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 =

我有一个像这样的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 
                }]
            }
        }
    });
}
函数堆栈栏(id,严重性){
var label=Object.keys(严重性);//获取标签
风险值临界=[];
var高=[];
var中等=[];
var低=[];
var其他=[];

例如(设i=0;i我将上述内容放在一个文件中,它可以正常工作(尽管我必须在调用中将“总体”更改为“严重性”)。因此,我预计您使用的内容可能与上面的示例不匹配

我使用的版本是:

<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>

变量严重性={
“3M”:[0,3,1,0,0],
“5T”:[0,0,1,0,0],
“6S”:[0,0,2,0,0]
};
函数StackedBar(id,严重性){
var label=Object.keys(严重性);//获取标签
风险值临界=[];
var高=[];
var中等=[];
var低=[];
var其他=[];
对于(设i=0;i
嘿,这是版本问题..我使用的是旧版本..更改为新版本..请不要发布代码、数据或错误消息的图像。请复制粘贴。请参考@toydarian…一定会这样做..谢谢
<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>