Блог

Я пытаюсь создать диаграмму с 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 /

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

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

 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',
      }
    },

  }
});
  

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

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