Как поставить 2 метки и разные подсказки из двух полос

Question

Я пытаюсь разместить еще две функции на этом графике.

В нижней части графика отображаются 12 месяцев года с двумя барами для каждого месяца.Один из них в текущем году, а другой в прошлом году.Мне бы хотелось, чтобы каждый столбец отображал свою собственную метку, например: апрель 2019 г. и следующий апрель 2018 г.

А затем я блокирую всплывающие подсказки.В неподвижном состоянии, когда кто-то передает мышь, отображается информация о текущем и предыдущем году.Проблема на уровне итога, где он отображает итоговую сумму за два года.

Со своей стороны я стараюсь отображать только сумму бара, где находится мышь.Таким образом, итоговая сумма за 2019 г., пройденная мышью на панели 2019 г., и общая сумма за 2018 г., пройденная мышью за 2018.

Мой фид:

jsfiddle.net/gcr8z257/3/

Answer 1

Решение вопроса

Вы можете сделать это, изменив всплывающую подсказку mode на x вместо index, см. Эту документацию .

options: {
    tooltips: {
        mode: 'x'
    }
}

Фиксирование общего значения в соответствии с запросом

Вот решение, реализованное мной на основе кода, представленного по вопросу, и, вероятно, из этого потока , где мы можем найти базовое объяснение, кто эта работа.

Fist , создайте массив набора данных, принадлежащий тому же 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>