Chart.js 在条形图JS报告中，跳过零值，因此条形图无效

我有堆叠条形图.js版本：2.7.2，有两个投票类型正确/不正确的值。 它工作正常，但有一些关于正确投票的数据，没有关于不正确投票的数据的情况除外。反之亦然 为了解决这个问题，我在服务器上添加了一些检查，对于不存在的值，我在count字段的0值中添加了行，所以数据集看起来像

请注意，对于id为4的voteItemUsersResultsNoneCorrect数组行，请投票\u name:哪个虚构的城市是蝙蝠侠的家？}， 字段计数的值为0。查看生成的条形图，我看到0值被跳过，下一行的值被用于构建图表，所以所有下一行的条形图 无效

{"error_code":0,"message":"",
    "voteItemUsersResultsCorrect":{"0":
        {"count":9,"id":12,"vote_name":"According to the old proverb, to which European capital city do all roads lead ?"},"1":
        {"count":6,"id":13,"vote_name":"On which mountain did Moses receive the Ten Commandments ?"},"2":
        {"count":10,"id":9,"vote_name":"Traditionally, how many Wonders of the World are there ?"},"3":
        {"count":6,"id":10,"vote_name":"What is the name of the fairy in Peter Pan ?"},"4":
        {"count":12,"id":8,"vote_name":"Which crime-fighting cartoon dog has the initals \u201cS.D.\u201d on his collar ?"},"5":
        {"count":16,"id":4,"vote_name":"Which fictional city is the home of Batman ?"},"6":
        {"count":5,"id":14,"vote_name":"Which is the tallest mammal?"},"7":
        {"count":8,"id":11,"vote_name":"Which planet is the closest to Earth ?"},"10":
        {"count":0,"id":2,"vote_name":"Who Framed Roger Rabbit ?"},"8":
        {"count":8,"id":15,"vote_name":"Who directed the movie Jaws?"},"9":
        {"count":8,"id":5,"vote_name":"Who was known as the Maid of Orleans ?"}},

    "voteItemUsersResultsNoneCorrect":{"0":
        {"count":22,"id":12,"vote_name":"According to the old proverb, to which European capital city do all roads lead ?"},"1":
        {"count":25,"id":13,"vote_name":"On which mountain did Moses receive the Ten Commandments ?"},"2":
        {"count":21,"id":9,"vote_name":"Traditionally, how many Wonders of the World are there ?"},"3":
        {"count":25,"id":10,"vote_name":"What is the name of the fairy in Peter Pan ?"},"4":
        {"count":19,"id":8,"vote_name":"Which crime-fighting cartoon dog has the initals \u201cS.D.\u201d on his collar ?"},"10":
        {"count":0,"id":4,"vote_name":"Which fictional city is the home of Batman ?"},"5":
        {"count":26,"id":14,"vote_name":"Which is the tallest mammal?"},"6":
        {"count":23,"id":11,"vote_name":"Which planet is the closest to Earth ?"},"8":
        {"count":27,"id":2,"vote_name":"Who Framed Roger Rabbit ?"},"7":
        {"count":23,"id":15,"vote_name":"Who directed the movie Jaws?"},"9":
        {"count":23,"id":5,"vote_name":"Who was known as the Maid of Orleans ?"}
    }
}

我显示了完全检索数据和设置栏选项， 首先，我必须为3个数组monthsXCoordItems、VotNameLabels、VoteValuesRect设置值，并在其上创建条形图

$.ajax({
    url: href,
    type: "POST",
    dataType: "json",
    data: dataArray,
}).done(function (response) {
    if (response.error_code == 0) {

        this.this_voteItemUsersResultsCorrect = response.voteItemUsersResultsCorrect
        this.this_voteItemUsersResultsNoneCorrect = response.voteItemUsersResultsNoneCorrect

        for (var key_index in response.voteItemUsersResultsCorrect) {
            if (response.voteItemUsersResultsCorrect.hasOwnProperty(key_index)) {
                var dataRow= response.voteItemUsersResultsCorrect[key_index];
                monthsXCoordItems.push(dataRow.vote_name);
                voteNamelabels.push(dataRow.vote_name);
                voteValuesCorrect.push(dataRow.count);
            }
        }

        for (var key_index in response.voteItemUsersResultsNoneCorrect) {
            if (response.voteItemUsersResultsNoneCorrect.hasOwnProperty(key_index)) {
                var dataRow= response.voteItemUsersResultsNoneCorrect[key_index];
                voteValuesNoneCorrect.push(dataRow.count);
            }
        }

        var barCanvas = document.getElementById("canvasVoteNames");
        $("#div_canvasVoteNames").css("display","block")

        var barCanvasContext = barCanvas.getContext('2d');

        var numberWithCommas = function (x) {
            return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        };
        var self = this;
        if (window.chartObject != undefined) { // clear existing instance
            window.chartObject.destroy();
        }
        window.chartObject = new Chart(barCanvasContext, {  
            type: 'bar', // http://www.chartjs.org/docs/latest/charts/bar.html
            data: {
                labels: monthsXCoordItems,
                datasets: [{
                    label: 'Correct Votes',
                    data: voteValuesCorrect,
                }, {
                    label: 'Incorrect Votes',
                    data: voteValuesNoneCorrect,
                }
            ]
        },

        options: { // options of Report By Vote Names
            animation: {
                duration: 10,
            },

            scales: { // options for x and y scales
                xAxes: [{
                    stacked: true,    
                    gridLines: {
                        display: true,
                        // offsetGridLines: true,
                    },
                    // barThickness: 70,

                }],
                yAxes: [{
                    stacked: true, 
                    ticks: {
                        callback: function (value) { 
                            if (Math.floor(value) === value) {
                                return value;
                            }
                        }, 
                    },
                }],
            }, // scales: { // options for x and y scales
            legend: {display: true}
        }, // options: { // options of Report By Vote Names


        plugins: [{
            beforeInit: function (chart) {
                chart.data.labels.forEach(function (value, index, array) {
                    var a = [];
                    a.push(value.slice(0, this_column_width));
                    var i = 1;
                    while (value.length > (i * this_column_width)) {
                        a.push(value.slice(i * this_column_width, (i + 1) * this_column_width));
                        i++;
                    }
                    array[index] = a;
                })
            }
        }]

    }); 

    barCanvas.onclick = function (e) { 
        var slice = window.chartObject.getElementAtEvent(e);

        if (!slice.length) return; // return if not clicked on slice
        var label = slice[0]._model.label;
        if (label.length > 1) { // that is an array - we need to convert it to string
            var label_text = ''
            for (var key in label) {
                if (label.hasOwnProperty(key)) {
                    label_text = label_text + label[key]
                }
            }
            label = label_text
        }
        self.this_voteItemUsersResultsCorrect.forEach(function (data) {
            if (label == data.vote_name) {
                backendReports.showVoteNamesReportDetailsByVoteId(data.id, data.vote_name)
                return;
            }
        });
    } // barCanvas.onclick = function(e) {
}

if (response.error_code > 0) {
    alertMsg(response.message, 'Reports error!', 'OK', 'fa fa-file-chart-pie')
}
});

有没有一些解决这个错误的方法

修改块2： 我把图表上传到网上：请打开 提供了信用，默认情况下，将打开包含所有数据的页面，但 哪个虚构的城市是蝙蝠侠ivalid的家，因为它的非正确堆栈值为0：

如果从voyes筛选器选择中选择“仅投票”，则可以看到值为0的有效结果： ?

谢谢

有计数：13，id:4和计数：22，id:2

也就是说，你的剧本把蝙蝠侠和兔子罗杰搞混了

可能有更多的错误值；它只在值为0时得到最明显的结果

---

更好地合并服务器端的阵列，使它们易于用于图表；这将允许更简单的索引分配，并且还将加快JS的运行时间。较低的复杂度通常比无用的复杂度更容易处理，因为它与阵列的客户端合并是一样的。

请从第一眼看修改后的BLOCK 21我不明白你的意思：我在serverphp上做了很多计算，得到了3个简单的数组monthsXCoordItems、voteNamelabels、，VoteValuesRect具有适当的结构，问题似乎在于，在执行条形图设置x点时，有一个条件，如if！emptyXValue{//0值在这里是真的-为什么？让我们从下一个点asnd获取x值，这会导致无效结果}2你能解释一下这是怎么回事吗？你的脚本把蝙蝠侠和兔子罗杰搞混了？有不同的id、计数、名称字段和3种不同的数组monthsXCoordItems、VotNameLabels、VoteValuesRect：您可以通过实时url查看它们的值。