如果它们在一组数据中，如何隐藏图表 js 中的空列

Question

几天来我一直在为这个问题而苦恼。我需要制作一个条形图来显示销售月份和销售日期。

这就是我设法做到的。

如您所见，有很多空格。 对于上面的例子，我从 java（和 sql server）接收到这个数据，在图表中使用：

[{"datasets":[{"backgroundColor":["rgb(52, 152, 219)","rgb(52, 152, 219)","rgb(52, 152, 219)","rgb(52, 152, 219)"],"borderColor":["rgb(52, 152, 219)","rgb(52, 152, 219)","rgb(52, 152, 219)","rgb(52, 152, 219)"],"stack":1,"data":[411.75,null,null,null],"borderWidth":"1","skipNull":true,"label":"24/12/22"},{"backgroundColor":["rgb(64, 212, 126)","rgb(64, 212, 126)","rgb(64, 212, 126)","rgb(64, 212, 126)"],"borderColor":["rgb(64, 212, 126)","rgb(64, 212, 126)","rgb(64, 212, 126)","rgb(64, 212, 126)"],"stack":1,"data":[null,29534.25,null,null],"borderWidth":"1","skipNull":true,"label":"01/01/23"},{"backgroundColor":["rgb(64, 212, 126)","rgb(64, 212, 126)","rgb(64, 212, 126)","rgb(64, 212, 126)"],"borderColor":["rgb(64, 212, 126)","rgb(64, 212, 126)","rgb(64, 212, 126)","rgb(64, 212, 126)"],"stack":2,"data":[null,50000,null,null],"borderWidth":"1","skipNull":true,"label":"04/01/23"},{"backgroundColor":["rgb(64, 212, 126)","rgb(64, 212, 126)","rgb(64, 212, 126)","rgb(64, 212, 126)"],"borderColor":["rgb(64, 212, 126)","rgb(64, 212, 126)","rgb(64, 212, 126)","rgb(64, 212, 126)"],"stack":3,"data":[null,20,null,null],"borderWidth":"1","skipNull":true,"label":"11/01/23"},{"backgroundColor":["rgb(64, 212, 126)","rgb(64, 212, 126)","rgb(64, 212, 126)","rgb(64, 212, 126)"],"borderColor":["rgb(64, 212, 126)","rgb(64, 212, 126)","rgb(64, 212, 126)","rgb(64, 212, 126)"],"stack":4,"data":[null,50,null,null],"borderWidth":"1","skipNull":true,"label":"12/01/23"},{"backgroundColor":["rgb(64, 212, 126)","rgb(64, 212, 126)","rgb(64, 212, 126)","rgb(64, 212, 126)"],"borderColor":["rgb(64, 212, 126)","rgb(64, 212, 126)","rgb(64, 212, 126)","rgb(64, 212, 126)"],"stack":5,"data":[null,10,null,null],"borderWidth":"1","skipNull":true,"label":"20/01/23"},{"backgroundColor":["rgb(64, 212, 126)","rgb(64, 212, 126)","rgb(64, 212, 126)","rgb(64, 212, 126)"],"borderColor":["rgb(64, 212, 126)","rgb(64, 212, 126)","rgb(64, 212, 126)","rgb(64, 212, 126)"],"stack":6,"data":[null,29852.17,null,null],"borderWidth":"1","skipNull":true,"label":"31/01/23"},{"backgroundColor":["rgb(230, 126, 34)","rgb(230, 126, 34)","rgb(230, 126, 34)","rgb(230, 126, 34)"],"borderColor":["rgb(230, 126, 34)","rgb(230, 126, 34)","rgb(230, 126, 34)","rgb(230, 126, 34)"],"stack":1,"data":[null,null,30,null],"borderWidth":"1","skipNull":true,"label":"03/02/23"},{"backgroundColor":["rgb(230, 126, 34)","rgb(230, 126, 34)","rgb(230, 126, 34)","rgb(230, 126, 34)"],"borderColor":["rgb(230, 126, 34)","rgb(230, 126, 34)","rgb(230, 126, 34)","rgb(230, 126, 34)"],"stack":2,"data":[null,null,50,null],"borderWidth":"1","skipNull":true,"label":"06/02/23"},{"backgroundColor":["rgb(230, 126, 34)","rgb(230, 126, 34)","rgb(230, 126, 34)","rgb(230, 126, 34)"],"borderColor":["rgb(230, 126, 34)","rgb(230, 126, 34)","rgb(230, 126, 34)","rgb(230, 126, 34)"],"stack":3,"data":[null,null,260,null],"borderWidth":"1","skipNull":true,"label":"07/02/23"},{"backgroundColor":["rgb(230, 126, 34)","rgb(230, 126, 34)","rgb(230, 126, 34)","rgb(230, 126, 34)"],"borderColor":["rgb(230, 126, 34)","rgb(230, 126, 34)","rgb(230, 126, 34)","rgb(230, 126, 34)"],"stack":4,"data":[null,null,130,null],"borderWidth":"1","skipNull":true,"label":"08/02/23"},{"backgroundColor":["rgb(230, 126, 34)","rgb(230, 126, 34)","rgb(230, 126, 34)","rgb(230, 126, 34)"],"borderColor":["rgb(230, 126, 34)","rgb(230, 126, 34)","rgb(230, 126, 34)","rgb(230, 126, 34)"],"stack":5,"data":[null,null,102283.5,null],"borderWidth":"1","skipNull":true,"label":"10/02/23"},{"backgroundColor":["rgb(230, 126, 34)","rgb(230, 126, 34)","rgb(230, 126, 34)","rgb(230, 126, 34)"],"borderColor":["rgb(230, 126, 34)","rgb(230, 126, 34)","rgb(230, 126, 34)","rgb(230, 126, 34)"],"stack":6,"data":[null,null,989.89,null],"borderWidth":"1","skipNull":true,"label":"13/02/23"},{"backgroundColor":["rgb(230, 126, 34)","rgb(230, 126, 34)","rgb(230, 126, 34)","rgb(230, 126, 34)"],"borderColor":["rgb(230, 126, 34)","rgb(230, 126, 34)","rgb(230, 126, 34)","rgb(230, 126, 34)"],"stack":7,"data":[null,null,4459.45,null],"borderWidth":"1","skipNull":true,"label":"15/02/23"},{"backgroundColor":["rgb(230, 126, 34)","rgb(230, 126, 34)","rgb(230, 126, 34)","rgb(230, 126, 34)"],"borderColor":["rgb(230, 126, 34)","rgb(230, 126, 34)","rgb(230, 126, 34)","rgb(230, 126, 34)"],"stack":8,"data":[null,null,1044.89,null],"borderWidth":"1","skipNull":true,"label":"16/02/23"},{"backgroundColor":["rgb(230, 126, 34)","rgb(230, 126, 34)","rgb(230, 126, 34)","rgb(230, 126, 34)"],"borderColor":["rgb(230, 126, 34)","rgb(230, 126, 34)","rgb(230, 126, 34)","rgb(230, 126, 34)"],"stack":9,"data":[null,null,200,null],"borderWidth":"1","skipNull":true,"label":"24/02/23"},{"backgroundColor":["rgb(180, 84, 182)","rgb(180, 84, 182)","rgb(180, 84, 182)","rgb(180, 84, 182)"],"borderColor":["rgb(180, 84, 182)","rgb(180, 84, 182)","rgb(180, 84, 182)","rgb(180, 84, 182)"],"stack":1,"data":[null,null,null,844.63],"borderWidth":"1","skipNull":true,"label":"02/03/23"},{"backgroundColor":["rgb(180, 84, 182)","rgb(180, 84, 182)","rgb(180, 84, 182)","rgb(180, 84, 182)"],"borderColor":["rgb(180, 84, 182)","rgb(180, 84, 182)","rgb(180, 84, 182)","rgb(180, 84, 182)"],"stack":2,"data":[null,null,null,2530],"borderWidth":"1","skipNull":true,"label":"09/03/23"},{"backgroundColor":["rgb(180, 84, 182)","rgb(180, 84, 182)","rgb(180, 84, 182)","rgb(180, 84, 182)"],"borderColor":["rgb(180, 84, 182)","rgb(180, 84, 182)","rgb(180, 84, 182)","rgb(180, 84, 182)"],"stack":3,"data":[null,null,null,79490.595],"borderWidth":"1","skipNull":true,"label":"10/03/23"}],"labels":["Diciembre de 2022","Enero de 2023","Febrero de 2023","Marzo de 2023"]}]

我的问题来自于我使用列数据的方式，以便能够将金额与相应的日期和相应的月份放在一起。 例如这里：

"data":[null,null,null,79490.595]

如您在示例中所见，我选择显示从 2022 年 12 月到 2023 年 3 月四个月的数据，因此我发现将金额放在相应月份的方法是在其他月份发送空值，例如79490.595 可以在 3 月而不是 12 月与所有其他数据一起显示。这里的问题是它会在其他月份生成空格。所有其他数据都会发生这种情况。

所以我想知道这是否是一种只显示数据而不显示空值的方法。

我尝试使用 hidden : true; ，但这会删除所有数据，而不仅仅是空值。然后我在前面的数据示例中尝试了其他方法 hidden: [true,true,true,false] ，但是当然，它没有用（我也尝试生成 hidden: [false,true,true,false, true] ，如果我混淆了正确的布尔值，但也没有用）。

我可以对java代码进行修改，如果你提出一些关于它的建议。

此外，如果有帮助，这里是图表创建脚本的一部分，如果我可以在那里添加一些东西：

<canvas id="graficaGananciasProductos" style="width: 100px;"\>\</canvas\>

    var grafica = document.getElementById("graficaGananciasProductos");
    
    new Chart(grafica, {
        type: "<%=xTipo%>",
        data: <%=respuesta%>,
        stacked: false,
        options: {
            skipnull: true,
            scales: {
                xAxes: [{
                        stacked: false
                    }],
                yAxes: [{
                        stacked: false
                    }]
            }
        }
    });

• xTipo 表示图表是垂直条形图还是水平条形图
• respuesta 是根据日期间隔生成的数据集和标签。我发送生成数据的示例 对于我在图片中显示的图表。

谢谢！

尝试在数据集上使用隐藏，但它隐藏了列数组的所有数据，因此尝试在隐藏中创建一个布尔数组，尝试在我真正想隐藏的列上使用隐藏，但它没有不工作。 我在谷歌上搜索了很多，在 stackoverflow 和其他网站上有很多结果。我还尝试仅在 stackoverflow 中进行搜索，但找不到针对该特定问题的内容。 我还必须说，我以前从未使用过 Chart js，所以我是它的新手，不知道还有什么可以尝试的。