ChartJS条形图问题--显示 "零 "而不显示中心条形图。

Question

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

• 零表只包含有零的数据集，不显示。
• 如果一个图表中只有一个数据值，那么它就是岑。

我在codepen这里添加了这个例子。链接到ChartJs CodePen

var Canvas = document.getElementById("myChart");


var Data1 = {
  label: 'Project A',
  data: [10, 0, 10, 0 ,0 ,0 ,10],
  backgroundColor: 'rgba(0, 99, 132, 0.6)',
  borderWidth: 0,
  yAxisID: "y-axis"
};

var Data2 = {
  label: 'Project B',
  data: [0 , 5, 5, 0 ,0 ,0 ,10],
  backgroundColor: 'rgba(99, 132, 0, 0.6)',
  borderWidth: 0,
  yAxisID: "y-axis"
};

var MonthData = {
  labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
  datasets: [Data1, Data2]
};

var chartOptions = {
  scales: {
    xAxes: [{
      barPercentage: 1,
      categoryPercentage: 0.6
    }],
    yAxes: [{
      id: "y-axis"
    }]
  }
};

var barChart = new Chart(Canvas, {
  type: 'bar',
  data: MonthData,
  options: chartOptions
});

另一个例子，请看下文。我已经添加了一个链接到源。如果我也能以同样的方式将数据添加到条形图中，那就完美了。

图片来源的链接

EDIT:添加了一个DX图的代码本。DX链接

托马斯

Answer 1

ChartJS和DevExtreme图表是2个不同的东西。如果你想在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
  }
}

不过这种数据操作我建议在后端做。只要在发到前端之前不要设置就可以了。

对于你的第二点，看来chartJs是帮不上忙的。为什么dxChart是付费的，而chartJs是免费的，这是有原因的。学会妥协或者成为JS忍者。干杯

Answer 2

将工具提示的intersect改为false应该可以解决这个问题。交叉：只有当你悬停在一个数据点上时，才会显示工具提示，如果是零，则没有工具提示）。

工具提示的配置可以在这里找到。https:/www.chartjs.orgdocs2.6.0configurationtooltip.html

var chartOptions = {
  scales: {
    xAxes: [{
      barPercentage: 1,
      categoryPercentage: 0.6
    }],
    yAxes: [{
      id: "y-axis"
    }]
  },
  tooltips: {
    intersect: false
  }
};