Chart.js: отображение пользовательских подсказок, всегда видимых на гистограмме с накоплением

Question

В моем проекте MVC я использую chart.js (v2.8.0) для построения столбчатой ​​диаграммы с тремя наборами данных.

Мне нужно отображать настраиваемые подсказки, которые всегда виднывнутри столбцов для каждого набора данных. (См. Изображение ниже.) Мне трудно понять, как реализовать настраиваемые всплывающие подсказки, которые всегда видны.

Это мои текущие jsкод для диаграммы:

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: labelArray,
        datasets: [{
            label: 'Green %',
            data: greenData,
            backgroundColor: 'rgb(0,166,149)',
            borderColor: 'rgb(0,166,149)',
            borderWidth: 1,
        },
        {
            label: 'Orange %',
            data: orangeData,
            backgroundColor: 'rgb(229,117,31)',
            borderColor: 'rgb(229,117,31)',
            borderWidth: 1,
        },
        {
            label: 'Grey %',
            data: greyData,
            backgroundColor: 'rgb(179,179,179)',
            borderColor: 'rgb(179,179,179)',
            borderWidth: 1,
        }]
    },
    options: {
        scales: {
            xAxes: [{
                stacked: true,
            }],
            yAxes: [{
                stacked: true
            }]
        }
    }
});

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

Answer 1

Предполагая, что вы ссылаетесь на значения в процентах на столбцах, они называются метками, а не всплывающими подсказками (которые появляются при наведении курсора на элемент).

Функциональность меток изначально недоступна в диаграмме.js но можно добавить через плагин datalabels . Вам нужно будет включить плагин через тег script. ( После тега скрипта, в который вы загружаете Chart.js!)

Пример диаграммы гистограммы *1011* уже достаточно близок к вашему желаемому результату, но я слил егос вашим кодом в фрагменте ниже, чтобы помочь вам в этом.

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

var labelArray = ["James", "Mark", "Simon"],
  greenData = [55, 82, 32],
  orangeData = [27, 10, 53],
  greyData = [18, 8, 15];

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: labelArray,
    datasets: [{
        label: 'Green %',
        data: greenData,
        backgroundColor: 'rgb(0,166,149)',
        borderColor: 'rgb(0,166,149)',
        borderWidth: 1
      },
      {
        label: 'Orange %',
        data: orangeData,
        backgroundColor: 'rgb(229,117,31)',
        borderColor: 'rgb(229,117,31)',
        borderWidth: 1,
      },
      {
        label: 'Grey %',
        data: greyData,
        backgroundColor: 'rgb(179,179,179)',
        borderColor: 'rgb(179,179,179)',
        borderWidth: 1,
      }
    ]
  },
  options: {
    scales: {
      xAxes: [{
        stacked: true,
      }],
      yAxes: [{
        stacked: true
      }]
    },
    plugins: {
      datalabels: {
        color: 'white',
        font: {
          weight: 'bold'
        },
        formatter: function(value, context) {
          return Math.round(value) + '%';
        }
      }
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.7.0"></script>
<canvas id="myChart"></canvas>