Chart.js标签未显示在顶部

Question

我正在尝试使用chart.js创建图表，并且正在使用this插件来显示一些标签。但是，当大多数价值放在首位时，它就不会显示出来。检查第一个值（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/

Answer 1

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

使用layout属性设置选项对象：

layout: {
  padding: {
    top: 20
    }
  }

图表var应该是这样的：

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

  }
});

Answer 2

当您使用标题显示时，它也显示清楚true将此选项置于内部

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