时间戳

首页 > 解决方案 > 如何从两个条中放置 2 个标签和不同的工具提示

javascript - 如何从两个条中放置 2 个标签和不同的工具提示

问题描述

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

在底部，图表显示一年中的 12 个月，每个月有两个条形图。一个是今年的，另一个是去年的。我希望每个栏都有自己的标签，以便能够显示，例如：2019 年 4 月和 2018 年 4 月

然后我阻止工具提示。鼠标经过时静止不动，显示当年和上一年的信息。问题在于显示两年总计的总计级别。

在我这边，我尝试只显示鼠标所在栏的总数。综上所述，2019 年的总数超过了 2019 年的酒吧，2018 年的总数超过了 2018 年。

我的文件：

jsfiddle.net/gcr8z257/3/

标签： javascriptlaravel-5chart.js

解决方案

问题的解决方案

您可以通过将工具提示更改为 来完成此mode操作x，index请参阅此文档。

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
      }]
    }
  }
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<canvas id="bar-chart" width="400" height="300"></canvas>

推荐阅读