Chart.js 从工具提示中删除零值

我使用Chart.js和堆栈组条形图

问题是数据包含零值，这些值显示在工具提示中，使其更难读取。我怎样才能移除它们

截图：

编辑1

这是应该返回图表选项的代码

  getChartOptions(): import('chart.js').ChartOptions | undefined {
    return {
      title: {
        display: true,
        text: 'Chart.js Bar Chart - Stacked',
      },
      tooltips: {
        mode: 'index',
        intersect: false,
      },
      responsive: true,
      scales: {
        xAxes: [
          {
            stacked: true,
          },
        ],
        yAxes: [
          {
            stacked: true,
          },
        ],
      },
    };
  }

编辑2:

  ngOnInit(): void {
    this.http.get("http://localhost:8080/")
      .subscribe((data) => {
        this.originalData = data;

        this.myChart = new Chart('myChart', {
          type: 'bar',
          data: this.getChartData(),
          options: this.getChartOptions(),
        });

      });
  }

  getChartData() {
    return {
      labels: this.originalData.labels,
      datasets: this.originalData.datasets,
    };
  }

{
   "labels":[
      "January",
      "February",
      "March",
      "April",
      "May",
      "June",
      "July"
   ],
   "datasets":[
      {
         "label":"Dataset 1",
         "backgroundColor":"window.chartColors.red",
         "stack":"Stack 0",
         "data":[
            "randomScalingFactor()",
            "randomScalingFactor()",
            "randomScalingFactor()",
            "randomScalingFactor()",
            "randomScalingFactor()",
            "randomScalingFactor()",
            "randomScalingFactor()"
         ]
      },
      {
         "label":"Dataset 2",
         "backgroundColor":"window.chartColors.blue",
         "stack":"Stack 0",
         "data":[
            "randomScalingFactor()",
            "randomScalingFactor()",
            "randomScalingFactor()",
            "randomScalingFactor()",
            "randomScalingFactor()",
            "randomScalingFactor()",
            "randomScalingFactor()"
         ]
      },
      {
         "label":"Dataset 3",
         "backgroundColor":"window.chartColors.green",
         "stack":"Stack 1",
         "data":[
            "randomScalingFactor()",
            "randomScalingFactor()",
            "randomScalingFactor()",
            "randomScalingFactor()",
            "randomScalingFactor()",
            "randomScalingFactor()",
            "randomScalingFactor()"
         ]
      }
   ]
}

编辑3:

  ngOnInit(): void {
    this.http.get("http://localhost:8080/")
      .subscribe((data) => {
        this.originalData = data;

        this.myChart = new Chart('myChart', {
          type: 'bar',
          data: this.getChartData(),
          options: this.getChartOptions(),
        });

      });
  }

  getChartData() {
    return {
      labels: this.originalData.labels,
      datasets: this.originalData.datasets,
    };
  }

{
   "labels":[
      "January",
      "February",
      "March",
      "April",
      "May",
      "June",
      "July"
   ],
   "datasets":[
      {
         "label":"Dataset 1",
         "backgroundColor":"window.chartColors.red",
         "stack":"Stack 0",
         "data":[
            "randomScalingFactor()",
            "randomScalingFactor()",
            "randomScalingFactor()",
            "randomScalingFactor()",
            "randomScalingFactor()",
            "randomScalingFactor()",
            "randomScalingFactor()"
         ]
      },
      {
         "label":"Dataset 2",
         "backgroundColor":"window.chartColors.blue",
         "stack":"Stack 0",
         "data":[
            "randomScalingFactor()",
            "randomScalingFactor()",
            "randomScalingFactor()",
            "randomScalingFactor()",
            "randomScalingFactor()",
            "randomScalingFactor()",
            "randomScalingFactor()"
         ]
      },
      {
         "label":"Dataset 3",
         "backgroundColor":"window.chartColors.green",
         "stack":"Stack 1",
         "data":[
            "randomScalingFactor()",
            "randomScalingFactor()",
            "randomScalingFactor()",
            "randomScalingFactor()",
            "randomScalingFactor()",
            "randomScalingFactor()",
            "randomScalingFactor()"
         ]
      }
   ]
}

EDIT4-getChartData（）可能返回的内容示例：

  ngOnInit(): void {
    this.http.get("http://localhost:8080/")
      .subscribe((data) => {
        this.originalData = data;

        this.myChart = new Chart('myChart', {
          type: 'bar',
          data: this.getChartData(),
          options: this.getChartOptions(),
        });

      });
  }

  getChartData() {
    return {
      labels: this.originalData.labels,
      datasets: this.originalData.datasets,
    };
  }

{
   "labels":[
      "January",
      "February",
      "March",
      "April",
      "May",
      "June",
      "July"
   ],
   "datasets":[
      {
         "label":"Dataset 1",
         "backgroundColor":"window.chartColors.red",
         "stack":"Stack 0",
         "data":[
            "randomScalingFactor()",
            "randomScalingFactor()",
            "randomScalingFactor()",
            "randomScalingFactor()",
            "randomScalingFactor()",
            "randomScalingFactor()",
            "randomScalingFactor()"
         ]
      },
      {
         "label":"Dataset 2",
         "backgroundColor":"window.chartColors.blue",
         "stack":"Stack 0",
         "data":[
            "randomScalingFactor()",
            "randomScalingFactor()",
            "randomScalingFactor()",
            "randomScalingFactor()",
            "randomScalingFactor()",
            "randomScalingFactor()",
            "randomScalingFactor()"
         ]
      },
      {
         "label":"Dataset 3",
         "backgroundColor":"window.chartColors.green",
         "stack":"Stack 1",
         "data":[
            "randomScalingFactor()",
            "randomScalingFactor()",
            "randomScalingFactor()",
            "randomScalingFactor()",
            "randomScalingFactor()",
            "randomScalingFactor()",
            "randomScalingFactor()"
         ]
      }
   ]
}

---

可以设置工具提示过滤器。制作一个简单函数，仅在值非零时返回标签/值

从“Chart.js”导入图表；
var ctx=document.getElementById（'mychart'）；
风险值数据={
标签：[‘星期一’、‘星期二’、‘星期三’、‘星期四’、‘星期五’、‘星期六’]，
数据集：[{
标签：“标签标题”，
数据：[0,0,0,1,2,3,5]，
}]
};
var条形图=新图表（ctx{
类型：'bar'，
数据：数据，
选项：{
比例：{
x:{stacked:true}，
y:{stacked:true}，
},
工具提示：{
过滤器：函数（工具提示项、数据）{
//数据包含图表数据，请确保选择正确的
//价值观。
var value=data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]；
如果（值==0）{
返回false；
}否则{
返回true；
}
}
}
}
}

因此，换句话说，您需要更改

getChartOptions（）

：

getChartOptions（）：导入（'chart.js'）。ChartOptions |未定义{
返回{
标题：{
显示：对，
文本：“Chart.js条形图-堆叠”，
},
工具提示：{
模式：“索引”，
交集：错，
过滤器：函数（工具提示项、数据）{
var value=data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]；
如果（值==0）{
返回false；
}否则{
返回true；
},
},
},
回答：是的，
比例：{
xAxes：[
{
对,，
},
],
雅克斯：[
{
对,，
},
],
},
};
}

不幸的是，此代码没有编译。我得到的

属性“values”在
数据的类型“ChartData”上不存在。
和
的值找不到名称“label”。
在
if（label==0）上
您必须用您自己的语句替换
标签===0
。请参阅有关
数据.值的文档。
。如果您想让其他人在您的代码中修复此问题，请共享您的代码。我添加了代码。我希望它有帮助，但我对文档感到困惑。嗯，这并没有真正的帮助ful。如何呈现图表？我实际上使用Angular Ngonit（）初始化所有内容。数据是从本地服务器获取的。我添加了一些额外的代码。如果需要其他内容，请告诉我：）