javascript - ChartJS 条形问题 - 显示“零”而不是中心条

问题描述

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

仅包含零数据集的零标签未显示
如果图表中只有一个数据值，则为 cen

我在 codepen 添加了代码示例：Link to 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
});

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

图片来源链接

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

/托马斯

标签： javascriptwebchartschart.js

ChartJS 和 DevExtreme 图表是两个不同的东西。如果您想在 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 忍者。干杯

javascript - ChartJS 条形问题 - 显示“零”而不是中心条

问题描述

解决方案

推荐阅读