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

我已经为这个问题纠结了好几天了。我需要做一个条形图，显示了几个月的销售和销售的日子。
这就是我设法做到的。

正如你所看到的，有很多空白。对于上面的例子，我从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月显示所有其他数据。这里的问题是它在其他月份产生空白。所有其他数据都是如此。

所以我想知道这是否是一种只显示数据而不显示空值的方法。
我试着使用隐藏：true;，但这会删除所有数据，而不仅仅是空值。然后我尝试了其他aproach使用在前面的例子中的数据隐藏：[true，true，true，false]，但是科塞，它不起作用（我也试过生成hidden：[false，false，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是根据日期间隔生成的数据集和标签。我发送生成的数据的例子，我在图像中显示的图表。

谢谢！

尝试在数据集上使用hidden，但它隐藏了列数组的所有数据，因此尝试在hidden中创建一个布尔数组，尝试在我真正想要隐藏的列上使用hide，但它不起作用。我在谷歌上搜索了很多，在stackoverflow和其他网站上有很多结果。我也试着只在stackoverflow中搜索，但找不到针对这个特定问题的东西。我也不得不说，我从来没有用过Chart js，所以我是一个完全的纽比，不知道还有什么可以尝试的。

我也尝试了here，但我不知道在哪里复制和过去的代码或如何使用图表jss代码，我不能使它工作。

在网上搜索了一天又一天，没有找到答案，我不得不改变一下我做图表的方式。我让数据集包含31天的数据，在天数较少的月份，我为这些天设置了一个空值。我仍然不能摆脱由它们产生的空白，但现在它们比以前少得多。
也许是由于空间的大小，运行的狙击手，它不能被看到，但如果你看到它的全尺寸将是明确的。有一些东西，我不能显示在狙击手，也许我错过了一些图书馆，但在图片上，它显示了两个数字的酒吧。横条上的数字是当天的销售额，横条中间的数字是当天的销售额。
希望如果有人在几个月内面临同样的问题，可以找到有用的代码/示例。

var grafica1 = document.getElementById("graficaGananciasProductos_0");

var chart1 = new Chart(grafica1, {
  type: "bar",
  data: {
    "datasets": [{
        "backgroundColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "borderColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "data": [567, 734, 577],
        "borderWidth": "1",
        "label": "01"
      },
      {
        "backgroundColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "borderColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "data": [620, 854, 686],
        "borderWidth": "1",
        "label": "02"
      },
      {
        "backgroundColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "borderColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "data": [12, 557, 567],
        "borderWidth": "1",
        "label": "03"
      },
      {
        "backgroundColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "borderColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "data": [12, 46, 256],
        "borderWidth": "1",
        "label": "04"
      },
      {
        "backgroundColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "borderColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "data": [567, 345, 644],
        "borderWidth": "1",
        "label": "05"
      },
      {
        "backgroundColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "borderColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "data": [620, 3445, 456],
        "borderWidth": "1",
        "label": "06"
      },
      {
        "backgroundColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "borderColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "data": [12, 866, 136],
        "borderWidth": "1",
        "label": "07"
      },
      {
        "backgroundColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "borderColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "data": [12, 455, 467],
        "borderWidth": "1",
        "label": "08"
      },
      {
        "backgroundColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "borderColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "data": [567, 356, 577],
        "borderWidth": "1",
        "label": "09"
      },
      {
        "backgroundColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "borderColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "data": [620, 456, 167],
        "borderWidth": "1",
        "label": "10"
      },
      {
        "backgroundColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "borderColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "data": [12, 45, 467],
        "borderWidth": "1",
        "label": "11"
      },
      {
        "backgroundColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "borderColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "data": [12, 3556, 45],
        "borderWidth": "1",
        "label": "12"
      },
      {
        "backgroundColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "borderColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "data": [567, 356, 257],
        "borderWidth": "1",
        "label": "13"
      },
      {
        "backgroundColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "borderColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "data": [620, 34, 126],
        "borderWidth": "1",
        "label": "14"
      },
      {
        "backgroundColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "borderColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "data": [12, 866, 567],
        "borderWidth": "1",
        "label": "15"
      },
      {
        "backgroundColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "borderColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "data": [12, 554, 456],
        "borderWidth": "1",
        "label": "16"
      },
      {
        "backgroundColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "borderColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "data": [567, 3445, 755],
        "borderWidth": "1",
        "label": "17"
      },
      {
        "backgroundColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "borderColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "data": [620, 865, 467],
        "borderWidth": "1",
        "label": "18"
      },
      {
        "backgroundColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "borderColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "data": [12, 477, 567],
        "borderWidth": "1",
        "label": "19"
      },
      {
        "backgroundColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "borderColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "data": [12, 64, 755],
        "borderWidth": "1",
        "label": "20"
      },
      {
        "backgroundColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "borderColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "data": [567, 345, 567],
        "borderWidth": "1",
        "label": "21"
      },
      {
        "backgroundColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "borderColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "data": [620, 123, 554],
        "borderWidth": "1",
        "label": "22"
      },
      {
        "backgroundColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "borderColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "data": [784, 456, 567],
        "borderWidth": "1",
        "label": "23"
      },
      {
        "backgroundColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "borderColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "data": [467, 34, 567],
        "borderWidth": "1",
        "label": "24"
      },
      {
        "backgroundColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "borderColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "data": [874, 824, 456],
        "borderWidth": "1",
        "label": "25"
      },
      {
        "backgroundColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "borderColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "data": [678, 245, 5467],
        "borderWidth": "1",
        "label": "26"
      },
      {
        "backgroundColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "borderColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "data": [12, 67, 354],
        "borderWidth": "1",
        "label": "27"
      },
      {
        "backgroundColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "borderColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "data": [578, 456, 654],
        "borderWidth": "1",
        "label": "28"
      },
      {
        "backgroundColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "borderColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "data": [567, null, 564],
        "borderWidth": "1",
        "label": "29",
        "skipNull": true
      },
      {
        "backgroundColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "borderColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "data": [620, null, 741],
        "borderWidth": "1",
        "label": "30",
        "skipNull": true
      },
      {
        "backgroundColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "borderColor": ["rgb(64, 212, 126)", "rgb(52, 152, 219)", "rgb(230, 126, 34)"],
        "data": [1234, null, 852],
        "borderWidth": "1",
        "label": "31",
        "skipNull": true
      }
    ],
    "labels": ["Enero de 2023", "Febrero de 2023", "Marzo de 2023"]
  },
  stacked: false,
  options: {
    skipnull: true,
    barPercentage: 1,
    categoryPercentage: 1,
    legend: {
      display: false
    },
    scales: {
      xAxes: [{
        stacked: false,
        barPercentage: 0.7,
        categoryPercentage: 1
      }],
      yAxes: [{
        stacked: false
      }]
    },
    animation: {
      "onComplete": function() {
        var chartInstance = this.chart,
          ctx = chartInstance.ctx;

        ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';

        this.data.datasets.forEach(function(dataset, i) {
          var meta = chartInstance.controller.getDatasetMeta(i);
          meta.data.forEach(function(bar, index) {
            var data = dataset.label;
            ctx.fillText(data, bar._model.x, bar._model.y - 5);
          });
        });
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.2.0/chartjs-plugin-datalabels.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.2.0/chartjs-plugin-datalabels.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
  <div class="panel panel-default">
    <div class="form-group">
      <div class="form-horizontal form-bordered">
        <div class="ibox-content">
          <div class="row">
            <div class="col-xs-12">
              <canvas id="graficaGananciasProductos_0"></canvas>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

因为我不能上传图片，这里是它应该如何与我的代码上使用的截图。https://imgur.com/b27WScN
谢谢

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

谢谢！

1条答案

相关问题

热门标签

最新问答