«Встроенные» метки в ChartJS - PullRequest
Новая
       24

«Встроенные» метки в ChartJS

0 голосов
/ 05 января 2019

Можно ли визуализировать диаграмму с «встроенными» метками между горизонтальными полосами в ChartJS?

enter image description here

1 Ответ

0 голосов
/ 05 января 2019

Вы можете использовать chartjs-plugin-datalabels для этого, что очень полезно при отображении меток на данных для любого типа диаграмм и имеет широкие возможности настройки.

Обратите внимание, что для этого требуется Chart.js 2.7.0 или более поздней версии .

Используйте его, включив его под ключ plugins вашего графика options, как показано в следующих решениях ниже.

Решение № 1.

В приведенной ниже конфигурации ваши метки будут отображаться на top center каждой полосы. См. рабочий пример . 

var options = {
  plugins: {
    datalabels: {
      // use the formatter function to customize the labels displayed
      formatter: function(value, context) {
        return context.chart.data.labels[context.dataIndex];
      },
      align: "top",
      anchor: "center",
      offset: 25,
      padding: -2,
      clip: true,
      font: {
        size: "16",
        weight: "bold"
      }
    }
  }
};

Однако, это не совсем то, что вы сделали на скриншоте,

Решение № 2.

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

  • anchor: 'start' и align: -60: это приведет к тому, что ваша метка данных будет сверху, выровнена по левому краю

  • заставьте свой график начать с нуля, установив scale.ticks.beginAtZero в true

  • offset: 25: расстояние (в пикселях), по которому метка удаляется от точки привязки

  • padding: function() {}: используйте опцию сценариев для динамического вычисления левого отступа на основе приблизительного размера метки, так как добавление определенного отступа будет работать только в том случае, если ваши метки имеют одинаковую ширину, которая не изменяется, но не это случай

См. рабочий пример для подробного обзора конфигураций.

Это решение будет работать, но оно определенно не идеально , так как положение этих этикеток может меняться в зависимости от размера этикетки, полоса толщина и размер диаграммы.

...