如何隐藏/不绘制带有 0 / null / undefined 值的条形？答案

【问题标题】：How to hide / not draw bars with 0 / null / undefined values?如何隐藏/不绘制带有 0 / null / undefined 值的条形？
【发布时间】：2022-01-03 16:01:08
【问题描述】：

如何隐藏错误的值？（0，空或未定义）

我尝试过做类似的事情

new Chart(this.barCanvas.nativeElement, {

    ...

     data: {
            datasets: [{
                     data: [
                             value < 1 ? null : value,
                             value2 < 1 ? null : value2,
                             valueX < 1 ? null : valueX,
                     ],
            }],
    },
    options: {
            skipNull: true,
    }

    ...

}

但它不起作用。

我在 SOF 上发现了一些类似的帖子，但没有答案或可行的解决方案

受 LeeLenalee 回答和 zulien 评论的启发，我创建了一个变量 chartData，在传递它之前我会对其进行过滤。

但是传递变量chartData会在data上产生类型错误（复制过去chartData的对象并直接传递它不会产生类型错误，但不会加载图形视图）

indexToRemove 是一个索引数组，基于到 0 的数据

var chartData = {
      labels: ['Batterie faible', 'Maintenance', 'HS', 'Place libre', 'Place occupée'].filter((v, i) => indexToRemove.includes(i)),
      datasets: [{
        label: '',
        data: data.filter((v, i) => indexToRemove.includes(i)),
        backgroundColor: [
          '#F6741A',
          '#dc2625',
          '#B91C1B',
          '#22c55e',
          '#FACC14'
        ].filter((v, i) => indexToRemove.includes(i)),
        borderRadius: 4,
        borderSkipped: false,
      }]
    }

    new Chart(this.barCanvas.nativeElement, {
      type: 'bar',
      data: chartData, // <- Type error (But replacing by the object correct the type error but still does not work as said above)
    ...
    }

【问题讨论】：

更通用的解决方案。在将项目完全传递到图表之前过滤项目是否有效？
zhulien 你的意思是在设置之前过滤我的数组和我的标签吗？我宁愿有一个更多的chartjs解决方案，但我所做的应该可以工作，所以我真的不明白：/
0stone0 将null 添加到数据集并在选项中添加skipNull: true。 chartjs.org/docs/3.2.0/charts/bar.html.

标签： javascript chart.js ionic6

【解决方案1】：

您可以预先过滤您的数据并与它一起使用对象表示法：

let initialData = [{
    "x": "label1",
    "y": 9
  },
  {
    "x": "label2",
    "y": 0
  },
  {
    "x": "label3",
    "y": 5
  },
  {
    "x": "label4",
    "y": 10
  },
  {
    "x": "label6",
    "y": null
  },
  {
    "x": "label7",
    "y": 3
  },
  {
    "x": "label8",
    "y": undefined
  }
];
let data = initialData.filter(e => e.y);

const options = {
  type: 'bar',
  data: {
    datasets: [{
      label: '# of Votes',
      data: data,
      backgroundColor: 'pink',
    }]
  },
  options: {}
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.js"></script>
</body>

【讨论】：

因为你改变了I dexAxis 你还需要改变每个对象中的X和Y，所以Y是带有标签的字符串，X是值
是的，我立即更改了值，但如果您尝试添加选项 indexAxis: 'y' 并在 initialData 中交换 x 和 y，您会发现它不起作用。空值保持显示。
那是因为过滤器对值起作用，那是 Y，所以你也需要把它改成 X
该死的你是对的。我想我必须休息了！谢谢