ChartJS 从工具提示中删除零值

bqujaahr 于 2023-05-17 发布在 Chart.js

关注(0)|答案(2)|浏览(225)

我使用Chart.js和堆栈组条形图。
问题是数据包含零值，这些值显示在工具提示中，使其更难阅读。我怎么能删除它们？
截图：x1c 0d1x

编辑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(),
        });

      });
  }

编辑3：

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

EDIT 4-getChartData（）返回的示例：

{
   "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

来源：https://stackoverflow.com/questions/65581874/remove-zero-values-from-tooltip

2条答案

按热度按时间

djp7away1#

可以设置工具提示过滤器。创建一个简单的函数，仅当值为非零时返回标签/值。

import Chart from 'chart.js';

var ctx = document.getElementById('mychart');
var data = {
    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
    datasets: [{
        label: 'Label Title',
        data: [0, 0, 0, 1, 2, 3, 5],
    }]
};
var barChart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: {
        scales: {
            x: {stacked: true},
            y: {stacked: true},
        },
        tooltips: {
            filter: function (tooltipItem, data) {
                // data contains the charts data, make sure you select the right 
                // value. 
                var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
                if (value === 0) {
                    return false;
                } else {
                    return true;
                }
            }
        }
    }
}

https://www.chartjs.org/docs/latest/configuration/tooltip.html#filter-callback
因此，换句话说，您需要更改getChartOptions()：

getChartOptions(): import('chart.js').ChartOptions | undefined {
    return {
      title: {
        display: true,
        text: 'Chart.js Bar Chart - Stacked',
      },
      tooltips: {
        mode: 'index',
        intersect: false,
        filter: function (tooltipItem, data) {
            var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
            if (value === 0) {
                return false;
            } else {
                return true;
            },
          },
      },
      responsive: true,
      scales: {
        xAxes: [
          {
            stacked: true,
          },
        ],
        yAxes: [
          {
            stacked: true,
          },
        ],
      },
    };
  }

赞(0）回复(0）举报 2023-05-17

dwbf0jvd2#

我不确定这是否是新的，因为我刚刚开始使用chart.js 4.3.0。
我能够在.raw键上进行过滤，该键保存项目计数。

tooltip: {
  filter: (tooltipItem) => tooltipItem.raw > 0,
}

赞(0）回复(0）举报 2023-05-17

我来回答

ChartJS 从工具提示中删除零值

2条答案

相关问题

热门标签

最新问答