轴的起点和终点之间的空间

Question

我尝试在图表上显示值并使用datalabels-plugin。 我有很多具有多个值的不同折线图。其中大多数都有问题。数据标签被隐藏。 如何在顶部Yaxis上添加空间并启动Xaxis来解决此问题？

var myChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: ["","1989", "2004", "2014", "2017", "2019", ""],
                    datasets: [{
                        label: 'Valorisation',
                        data: ["null",{{{cote_1989_eu}}}, {{{cote_2004}}}, {{{cote_2014}}}, {{{cote_2017}}}, {{{cote_2017}}}, "null"],
                        backgroundColor: 'white',
                        borderColor: 'rgb(255, 178, 0)',
                        borderWidth: 5,
                        pointHitRadius: 100
                    }]
                },
                options: {
                    tooltips: {
                        enabled: false
                    },
                    plugins: {
                        datalabels: {
                            backgroundColor: '#ffa100',
                            padding: 8,
                            borderRadius: 6,
                                clip: true,
                                    color: 'white',
                                        font: {
                                weight: 'bold'
                            },
                            align: 'center',
                            offset: 10,
                            formatter: function(value) {
                                return value.toLocaleString() + ' €';
                            }
                        }
                    },
                    legend: {
                        display: false
                    },
                    scales: {
                        xAxes: [{
                            gridLines: {
                                display: false
                            }
                        }],
                        yAxes: [{
                            gridLines: {
                                display: false
                            },
                            ticks: {
                                beginAtZero: true,
                                callback: function (value, index, values) {
                                    return value.toLocaleString() + ' €';
                                }
                            }
                        }]
                    }
                }
            });

编辑：xaxis的问题已解决，并且是Yaxis开头的问题。 Yaxis顶部的问题仍然存在！

Answer 1

解决此问题的一种方法是在offset的ticks配置中将true的{​​{1}}设置为xAxis，在max的ticks配置中设置yAxis的值。

const data = [100036, 140000, 400000, 900000, 1000000, null];
var options = {
  scales: {
    xAxes: [
      {
        offset: true
      }
    ],
    yAxes: [
      {
        ticks: {
          max: Math.max(...data) * 1.2
        }
      }
    ]
  }
};

取自official docs：

• 如果offset为true，则多余的空间将添加到两个边缘，并且轴将缩放 以适合图表区域。

• 与max一样，对其进行设置将覆盖刻度的最大数字，该数字默认情况下是从数据集的最大值中得出的。

---

var ctx = document.getElementById("myChart").getContext("2d");
const data = [100036, 140000, 400000, 900000, 1000000, null];
var myChart = new Chart(ctx, {
  type: "line",
  data: {
    labels: ["1989", "2004", "2014", "2017", "2019", ""],
    datasets: [
      {
        label: "Valorisation",
        data: data,
        backgroundColor: "white",
        borderColor: "rgb(255, 178, 0)",
        borderWidth: 5,
        pointHitRadius: 100
      }
    ]
  },
  options: {
    tooltips: {
      enabled: false
    },
    plugins: {
      datalabels: {
        backgroundColor: "#ffa100",
        padding: 8,
        borderRadius: 6,
        clip: true,
        color: "white",
        font: {
          weight: "bold"
        },
        align: "center",
        offset: 10,
        formatter: function(value) {
          return value.toLocaleString() + " €";
        }
      }
    },
    legend: {
      display: false
    },
    scales: {
      xAxes: [
        {
          offset: true,
          gridLines: {
            display: false
          }
        }
      ],
      yAxes: [
        {
          gridLines: {
            display: false
          },
          ticks: {
            beginAtZero: true,
            min: 0,
            max: Math.max(...data) * 1.2,
            callback: function(value, inde0x, values) {
              return value.toLocaleString() + " €";
            }
          }
        }
      ]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.23.0/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.5.0/dist/chartjs-plugin-datalabels.min.js"></script>
<canvas id="myChart" width="300" height="100"></canvas>