How to keep rounded bar corners when data is filtered chartJs?

问题

I came up with this JSFiddle : https://www.jsfiddle.net/gcb1dyou which has rounded chartJs bar corners.Problem is when legend clicked to filter data,corners disappear like below

When I clicked orange label as you can see rounded border disappeared on the yellow bar.

var lastVisible = 0;
for (var findLast = 0, findLastTo = this._chart.data.datasets.length; findLast < findLastTo; findLast++) {
if (!this._chart.getDatasetMeta(findLast).hidden) {
  lastVisible = findLast;
  if (this._chart.data.datasets[findLastTo - 1].data[this._index] == 0) {
    lastVisible -= 1;
  }
}

} Here I tried to add another if to make lastVisible findLast-1 when data is hidden(legend clicked) and previous index is null but didn't work

else{
          if(this._chart.data.datasets[findLastTo - 1].data[this._index] == 0){
            lastVisible=findLastTo-2;
          }
        }

How can I solve this?Expecting to see your answers.

回答1:

You already have check to apply rounded corners when not hidden (filtered). Just need to add condition to apply rounded corners when filtered assuming that zeros are not shown.

Something like this:

if (!this._chart.getDatasetMeta(findLast).hidden) {
    lastVisible = findLast;
    if (this._chart.data.datasets[findLastTo - 1].data[this._index] == 0) {
        lastVisible -= 1;
    }
} else {
    if (this._chart.data.datasets[findLast].data[this._index] == 0) {
        lastVisible = findLast;
        lastVisible -= 1;
    }
}

Here is modified JSFiddle: https://jsfiddle.net/xopr36g5/

回答2:

I fixed this problem by calculating the depth of dataset dynamically.Thanks for answers

 var lastVisible;
  var datasetsLength = this._chart.data.datasets.length;
  this._chart.data.datasets.map((e,index)=>{
    lastVisible=datasetsLength-1;
    //to find the depth of datasets and get non-zero value
    for(var i=lastVisible;i>0;i--){
    if(!this._chart.getDatasetMeta(i).hidden){
      if(this._chart.data.datasets[i].data[this._index] != 0){
        lastVisible = i;
        break;
      }
    }
    } 
  })

来源：https://stackoverflow.com/questions/62423740/how-to-keep-rounded-bar-corners-when-data-is-filtered-chartjs

标签

javascript

chart.js