如何在两个栏中放置2个标签和不同的工具提示

Question

我正在尝试在此图表上添加两个功能。

该图在底部显示一年中的12个月，每个月有两个条形。一个是当年，另一个是去年。 我希望每个条形都有自己的标签，例如：2019年4月和下一个2018年4月

然后我阻止了工具提示。当鼠标经过时静止不动时，它们会显示当前年份和前一年的信息。 问题在于显示两年总数的总数。

在我这边，我尝试仅显示鼠标所在栏的总数。总之，2019年的总数超过了2019年的水平，而2018年的总数超过了2018年的水平。

我的宝贝：

jsfiddle.net/gcr8z257/3/

Answer 1

问题解决方案

您可以通过将工具提示http.NewRequest更改为mode而不是x来完成此操作，请参阅此documentation。

index

按要求完成总价值

这是我根据问题所提供的代码（可能是来自thread的代码）实施的解决方案，在这里我们可以找到有关此工作人员的基本解释。

拳头，创建一个与悬停的工具提示属于同一options: { tooltips: { mode: 'x' } } 的数据集数组：

stack

然后，我们可以检查var dataStack = data.datasets.filter( x => x.stack == data.datasets[tooltipItem.datasetIndex].stack ); 是否用于此列表的最后一个数据集（因此总数仅在末尾添加）

callback

也，我更改了计算总数的位置，因为我们只需要在调用最后一个if (data.datasets[tooltipItem.datasetIndex] != dataStack[dataStack.length - 1]) 时才进行计算。

这是一个完整的示例：

callback

var ctx = document.getElementById('bar-chart').getContext('2d');
var chart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: [' mai', ' juin', ' juillet', ' aout', ' septembre', ' octobre', ' novembre', ' decembre', ' janvier', ' fevrier', ' mars', ' avril', ],
    datasets: [{
        label: "l'année derniere male",
        backgroundColor: 'rgb(5, 90, 130)',
        borderColor: 'rgb(254, 90, 130)',
        data: [5, 2, 0, 4, 2, 4, 5, 0, 7, 3, 0, 8],
        stack: 1
      },
      {
        label: "l'année derniere femelle",
        backgroundColor: 'rgb(120, 99, 132)',
        borderColor: 'rgb(254, 90, 130)',
        data: [7, 0, 3, 0, 9, 0, 1, 0, 8, 0, 10, 2],
        stack: 1
      },
      {
        label: 'Male cette annee',
        backgroundColor: 'rgb(255, 99, 132)',
        borderColor: 'rgb(255, 99, 132)',
        data: [0, 2, 0, 4, 2, 0, 5, 0, 7, 0, 0, 1],
        stack: 2
      },
      {
        label: 'femelle cette annee',
        backgroundColor: 'rgb(100, 99, 132)',
        borderColor: 'rgb(255, 99, 132)',
        data: [0, 12, 0, 1, 5, 0, 6, 0, 7, 0, 8, 15],
        stack: 2
      }
    ]
  },
  options: {
    tooltips: {
      mode: 'x',
      callbacks: {
        label: function(tooltipItem, data) {
          var corporation = data.datasets[tooltipItem.datasetIndex].label;
          var valor = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
          var dataStack = data.datasets.filter(x => x.stack == data.datasets[tooltipItem.datasetIndex].stack);

          if (data.datasets[tooltipItem.datasetIndex] != dataStack[dataStack.length - 1]) {
            return corporation + " : " + valor.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
          } else {
            var total = 0;
            for (var i = 0; i < dataStack.length; i++)
              total += dataStack[i].data[tooltipItem.index];
            return [corporation + " : " + valor.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,'), "Total : " + total];
          }
        },
      }
    },
    scales: {
      xAxes: [{
        stacked: true,
        ticks: {
          beginAtZero: true,
          suggestedMax: 50
        }
      }],
      yAxes: [{
        stacked: true
      }]
    }
  }
});