ChartJS栏问题-显示“零"而不是中心杠 [英] ChartJS Bar Issue - Showing "zeros" and not center bars

问题描述

我在ChartJs方面遇到了一些麻烦，希望您能提供帮助.我想在以下位置创建条形图:

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

我在codepen处添加了代码示例:链接到图片来源

为DX图表添加了一个代码笔: DX链接

/托马斯

解决方案

ChartJS和DevExtreme图表是两个不同的东西.如果要在chartJs中使用dxChart的功能，则必须自己编写(如果您无权访问源代码以查看其工作方式).

帮助您轻松实现第一点-只需取消设置不需要的数据即可.在此处进行检查.不要忘记删除不想显示的标签.

  for(让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);//同时删除相应的标签一世 - ;//重要的是删除后不要跳过任何记录}} 

但是我建议在后端进行这种数据处理.只是不要在发送到前端之前进行设置，就可以完成.

对于第二点，chartJs似乎无济于事.dxChart是付费的，而chartJs是免费的，这是有原因的.学习做出妥协或成为JS忍者.干杯

Im having some trouble with ChartJs and hope you can help. I would like to create a Bar Chart where:

• Zero Lables that only contains dataset with zeros are not showing
• If only one data value in a chart it is cen

I have added the code example here at 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
});

Another example, please see below. I have added a link to the source. If i could add data to a Bar Chart the same way it would be perfect.

Link to source of picture

EDIT: Added a codepen for DX chart: DX Link

/Thomas

解决方案

ChartJS and the DevExtreme chart are 2 different things. If you want the functionality of dxChart in chartJs then you would have to write it yourself (if you don't have access to the source code to see how they did it).

Helping you with the first point is easy - simply unset the data you don't want. Check here. Don't forget to remove the label you don't want to show.

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
  }
}

However this sort of data manipulation I would recommend doing in the back end. Just don't set it before sending to the front end and you're done.

For your second point it looks like chartJs cannot help. There is a reason why dxChart is paid and chartJs is free. Learn to make compromises or become a JS ninja. Cheers

这篇关于ChartJS栏问题-显示“零"而不是中心杠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！