Диаграмма JS добавляет настраиваемую подсказку к гистограмме с накоплением - PullRequest
Новая
       8

Диаграмма JS добавляет настраиваемую подсказку к гистограмме с накоплением

0 голосов
/ 30 апреля 2020

У меня есть следующие данные для разных месяцев, как показано ниже 

var barChartData = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
        label: 'Task 1',
        backgroundColor: "rgba(220,220,220,0.5)",
        data: [50, 40, 23, 45, 67, 78, 23]
    }, {
        label: 'Task 2',
        backgroundColor: "rgba(151,187,205,0.5)",
        data: [50, 40, 78, 23, 23, 45, 67]
    }, {
        label: 'Task 3',
        backgroundColor: "rgba(82,154,190,0.5)",
        data: [50, 67, 78, 23, 40, 23, 0]
    }]
};

И я хотел создать всплывающую подсказку, подобную этой

Ожидаемый график

Я попробовал следующий код 

var ctx = document.getElementById("canvas").getContext("2d");
var myBar = new Chart(ctx, {
    type: 'bar',
    data: barChartData,
    options: {
        title: {
            display: true,
            text: "Chart.js Bar Chart - Stacked"
        },
        tooltips: {
            mode: 'label',
            callbacks: {
                label: function(tooltipItem, data) {

                   var tasks = data.datasets[tooltipItem.datasetIndex].label;
                   var valor = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
                   var count =  data.datasets.length;
                   var total = 0;
                   var label = '';

                   for (var i = 0; i < data.datasets.length; i++) {
                       total += data.datasets[i].data[tooltipItem.index];                       
                   }                   
                   label += "Total : " + total + "(";

                    for (var i = 0; i < data.datasets.length; i++) {
                       label += data.datasets[tooltipItem.datasetIndex].label + " - $" + tooltipItem.yLabel.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",") + ",";
                    }
                    var lastChar = label.slice(-1);
                    if (lastChar === ',') {
                        label = label.slice(0, -1);
                    }

                    label += ")";
                   return [ label, "Count : " + count ];
                }
            }
        },
        responsive: true,
        scales: {
            xAxes: [{
                stacked: true,
            }],
            yAxes: [{
                stacked: true
            }]
        }
    }
});

Мне нужно отображать одну подсказку в месяц, поэтому я переключаю режим на 'label', и он создает три отдельные подсказки. Как мне добиться желаемого результата?

Спасибо

1 Ответ

0 голосов
/ 30 апреля 2020

Вы были почти там ... Хитрость в том, что функция обратного вызова должна собирать и возвращать array меток только один раз, но не для каждого dataset. 

callbacks: {
  label: (tooltipItem, data) => {
    if (tooltipItem.datasetIndex > 0) {
      return null;
    }

Также были проблемы с доступом к неправильным объектам / свойствам при создании основной метки.

Пожалуйста, ознакомьтесь с исправленным кодом ниже. 

new Chart("canvas", {
  type: 'bar',
  data: {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
      label: 'Task 1',
      backgroundColor: "rgba(220,220,220,0.5)",
      data: [50, 40, 23, 45, 67, 78, 23]
    }, {
      label: 'Task 2',
      backgroundColor: "rgba(151,187,205,0.5)",
      data: [50, 40, 78, 23, 23, 45, 67]
    }, {
      label: 'Task 3',
      backgroundColor: "rgba(82,154,190,0.5)",
      data: [50, 67, 78, 23, 40, 23, 0]
    }]
  },
  options: {
    title: {
      display: true,
      text: "Chart.js Bar Chart - Stacked"
    },
    tooltips: {
      mode: 'label',
      callbacks: {
        label: (tooltipItem, data) => {
          if (tooltipItem.datasetIndex > 0) {
            return null;
          }
          var tasks = data.datasets[tooltipItem.datasetIndex].label;
          var valor = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
          var count = data.datasets.length;
          var total = 0;
          var label = '';
          for (var i = 0; i < data.datasets.length; i++) {
            total += data.datasets[i].data[tooltipItem.index];
          }
          label += "Total : " + total + " (";
          for (var i = 0; i < data.datasets.length; i++) {
            if (label.endsWith(",")) {
              label += " ";
            }
            label += data.datasets[i].label + " - $" + data.datasets[i].data[tooltipItem.index].toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",") + ",";
          }
          label = label.slice(0, -1) + ")";
          return [label, "Count : " + count];
        }
      }
    },
    responsive: true,
    scales: {
      xAxes: [{
        stacked: true,
      }],
      yAxes: [{
        stacked: true
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="canvas" height="100"></canvas>
...