Ярлык Chart.js не отображается сверху

Я пытаюсь создать диаграмму с помощью chart.js и использую плагин это для отображения некоторых меток. Но когда самое значение сверху, оно не показывается. Проверьте первое значение (5), оно не отображается. Есть ли способ показать это?

Я пробовал заполнять <canvas>, но не работал.

var ver = document.getElementById("chart").getContext('2d');

var chart = new Chart(ver, {
  type: 'bar',
  data: {
    labels: ['Val1', 'Val2', 'Val3', 'Val4'],
    datasets: [{
      label: "Value",
      borderColor: "#fff",
      backgroundColor: "rgba(248,66,113,.85)",
      hoverBackgroundColor: "#f84271",
      data: [5,3,1,2]
    }]
  },
  options: {
    legend: {
      display: false,
    },
    tooltips: {
      backgroundColor: 'rgba(47, 49, 66, 0.8)',
      titleFontSize: 13,
      titleFontColor: '#fff',
      caretSize: 0,
      cornerRadius: 4,
      xPadding: 10,
      displayColors: false,
      yPadding: 10
    },
    animation: {
      "duration": "1000"
    },
    scales: {
      xAxes: [{
        stacked: false,
        gridLines: {
          drawBorder: true,
          display: true
        },
        ticks: {
          display: true
        }
      }],
      yAxes: [{
        stacked: false,
        gridLines: {
          drawBorder: true,
          display: true
        },
        ticks: {
          display: true
        }
      }]
    },
    plugins: {
      labels: {
        render: 'value',
      }
    },

  }
});

<script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/chart.js"></script>
<script type = "text/javascript" src = "https://cdn.jsdelivr.net/gh/emn178/chartjs-plugin-labels/src/chartjs-plugin-labels.js"></script>

<canvas id = "chart"></canvas>

Также поиграйте здесь: https://jsfiddle.net/9o84ucny/

charts

10.04.2019 12:34

Стоит ли изучать PHP в 2023-2024 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

1 879

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

https://www.chartjs.org/docs/latest/configuration/layout.html

Используйте свойство макета для объекта параметров:

layout: {
  padding: {
    top: 20
    }
  }

переменная диаграммы должна быть такой:

var chart = new Chart(ver, {
  type: 'bar',
  data: {
    labels: ['Val1', 'Val2', 'Val3', 'Val4'],
    datasets: [{
      label: "Value",
      borderColor: "#fff",
      backgroundColor: "rgba(248,66,113,.85)",
      hoverBackgroundColor: "#f84271",
      data: [5,10,1,2]
    }]
  },
  options: {
    layout: {
      padding: {                
        top: 20                
      }
    },
    legend: {
      display: false,
    },
    tooltips: {
      backgroundColor: 'rgba(47, 49, 66, 0.8)',
      titleFontSize: 13,
      titleFontColor: '#fff',
      caretSize: 0,
      cornerRadius: 4,
      xPadding: 10,
      displayColors: false,
      yPadding: 10
    },
    animation: {
      "duration": "1000"
    },
    scales: {
      xAxes: [{
        stacked: false,
        gridLines: {
          drawBorder: true,
          display: true
        },
        ticks: {
          display: true
        }
      }],
      yAxes: [{
        stacked: false,
        gridLines: {
          drawBorder: true,
          display: true
        },
        ticks: {
          display: true          
        }
      }]
    },
    plugins: {
      labels: {
        render: 'value',
      }
    },

  }
});

10.04.2019 12:55

Это также ясно видно, когда вы используете отображение заголовка true, поместите эту опцию внутри

 options: {
            plugins: {
                labels: {
                    render: 'value',
                }
            },
            title: {
                display: true,
            },
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true,
                        callback: function (value) { if (value % 1 === 0) { return value; } }
                    }
                }]
            }
        }

11.04.2019 08:52

Другие вопросы по теме

Странное поведение setInterval()

Форматирование метки данных ngx-charts-bar-horizontal

Изменение размера диаграммы Google в реакции rnd

Как установить прозрачность цвета для стран Google Geo Charts без данных?

Как использовать @ во внешнем html-файле на asp.net mvcresource url

Как изменить диаграмму Powerpoint ChartData с помощью Excel VBA

Как увеличить график?

Экспорт highcharts / stockchart в изображение не такой, как в веб-браузере

Программное добавление диаграммы в программу, но без отображения вывода диаграммы

Как визуализировать сделки внутри активов портфеля

Ярлык Chart.js не отображается сверху

Ответы 2

Другие вопросы по теме

Похожие вопросы