Javascript ChartJS条形图问题-显示“;“零”;而不是中间的酒吧

Javascript ChartJS条形图问题-显示“;“零”;而不是中间的酒吧,javascript,web,charts,chart.js,Javascript,Web,Charts,Chart.js,我在使用ChartJs时遇到了一些问题,希望您能提供帮助。我想创建一个条形图,其中: 不显示仅包含带零的数据集的零标签 如果图表中只有一个数据值,则为cen 我在codepen中添加了代码示例: 另一个例子,请参见下文。我已经添加了一个到源代码的链接。如果我能以同样的方式向条形图中添加数据,那就太完美了 编辑: 为DX图表添加了代码笔: /托马斯图表和发展图表是两种不同的东西。如果您想在chartJs中使用dxChart的功能,那么您必须自己编写它(如果您没有访问源代码的权限来查看它们是

我在使用ChartJs时遇到了一些问题,希望您能提供帮助。我想创建一个条形图,其中:

  • 不显示仅包含带零的数据集的零标签
  • 如果图表中只有一个数据值,则为cen
我在codepen中添加了代码示例:

另一个例子,请参见下文。我已经添加了一个到源代码的链接。如果我能以同样的方式向条形图中添加数据,那就太完美了

编辑: 为DX图表添加了代码笔:


/托马斯

图表和发展图表是两种不同的东西。如果您想在chartJs中使用dxChart的功能,那么您必须自己编写它(如果您没有访问源代码的权限来查看它们是如何实现的)

在第一点上帮助您很容易——只需取消设置您不需要的数据。检查不要忘记移除不想显示的标签

for (let i = 0; i <= Data1.data.length; i++){
  if (Data1.data[i] === 0 && Data2.data[i] === 0) {
    Data2.data.splice(i, 1);
    Data1.data.splice(i, 1);
    labels.splice(i, 1); // also remove the corresponding label
    i--; // important not to skip any records after removing
  }
}

for(让i=0;i将工具提示的intersect更改为false应该可以解决此问题。(intersect:true仅在将鼠标悬停在数据点上时显示工具提示,如果数据点为零,则没有工具提示)

工具提示配置可在此处找到:


谢谢,我知道dxChart是付费的,我使用免费版本已经有一段时间了。但是我更喜欢ChartJS,根据你的反馈,这似乎是一个功能缺失-希望有一天它会得到:)当然,我的应用程序后端有一个功能。ChartJS面临的“问题”,如果我一年有50个数据集。我在这里用7创建了一个:然后情节变得几乎不可读。我明白你的意思。这将导致用户体验问题。这意味着最好重新思考需要什么以及如何实现它。如果你在一个月内有50盘,而在另一个月内有1盘,你的图表看起来会很奇怪。如果是这样的话,我建议使用折线图,如果在同一个月所有的集合都为零,就不要删除集合。正如我所说,chartJS无法帮助您完成第二点,但我为您的第一点提供了解决方案。
for (let i = 0; i <= Data1.data.length; i++){
  if (Data1.data[i] === 0 && Data2.data[i] === 0) {
    Data2.data.splice(i, 1);
    Data1.data.splice(i, 1);
    labels.splice(i, 1); // also remove the corresponding label
    i--; // important not to skip any records after removing
  }
}
var chartOptions = {
  scales: {
    xAxes: [{
      barPercentage: 1,
      categoryPercentage: 0.6
    }],
    yAxes: [{
      id: "y-axis"
    }]
  },
  tooltips: {
    intersect: false
  }
};