在 charts.js 中的图例和图表之间创建 space

Question

我正在与 charts.js 合作，但我遇到了一个问题。我的图例和条形图值有些重叠。

我无法解决此问题，如果有解决此问题的方法，我们将不胜感激

我在下面分享了JS fiddle link

var ctx = document.getElementById("canvas").getContext("2d");
var nomi = [2017, 2018, 2019];

var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: nomi,
    datasets: [{
        label: 'PP PERVENUTI',
        data: [50, 30, 45],
        backgroundColor: "#8A0808",
        fill: false,
        borderColor: "#8A0808",
        borderWidth: 3
      },
      {
        label: 'PP EVASI',
        data: [60, 45, 12],
        backgroundColor: "#0B610B",
        fill: false,
        borderColor: "#0B610B",
        borderWidth: 3
      },
      {
        label: 'PI PERVENUTI',
        data: [20, 25, 35],
        backgroundColor: "#8A0886",
        fill: false,
        borderColor: "#8A0886",
        borderWidth: 3
      },
      {
        label: 'PI EVASI',
        data: [10, 20, 30],
        backgroundColor: "#0404B4",
        fill: false,
        borderColor: "#0404B4",
        borderWidth: 3
      }
    ]
  },
  options: {
    legend: {
      display: true,
      position: "top"
    },
    hover: {
      animationDuration: 0
    },
    animation: {
      onComplete: function() {

        var ctx = this.chart.ctx;
        const chart = this.chart;
        ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
        ctx.fillStyle = "black";
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';

        this.data.datasets.forEach(function(dataset, i) {

          if (chart.getDatasetMeta(i).hidden) {
            return;
          }

          for (var i = 0; i < dataset.data.length; i++) {
            for (var key in dataset._meta) {
              var model = dataset._meta[key].data[i]._model;
              ctx.fillText(dataset.data[i], model.x, model.y);
            }
          }
        });
      }
    }
  }
});

我也在上面分享了我的代码

我不知道如何在图例和图表之间创建 space，将不胜感激，谢谢

Answer 1

如果我没记错的话，chart js 没有构建用于在标签和图表之间放置填充的配置，尽管标签的填充以 wor 格式应用，这意味着 chart js 在标签和图表之间应用填充另一方面，标签，您可以在图表标题和标签之间应用填充。

如果你想在图表的标题和图表之间填充，你可以使用下面的代码：

                 plugins: {
                    title: {
                        display: true,
                        text:'Historico Mensual',
                    },
                    legend: {
                        labels: {
                            padding: 100
                        }
                    }
                },

另一种解决方案是使用以下代码将标签的位置更改为底部：

options: {
legend: {
  display: true,
  position: "bottom"
},

并添加布局填充，这样值就不会超出 canvas。

  options: {
     layout:{
        padding:20
     }
  },

在 charts.js 中的图例和图表之间创建 space

Create space between legend and chart in charts.js

javascript

chart.js