在Chart.js V2中为扩展线图添加右侧填充物

Question

我目前正在升级一个 chart.js 线图从v1到v2，遇到了一个障碍。

该图表数据包括 customOptions 下的一个布尔值数组。featured 属性。

var chartData = {
    labels: [
      "14th Jan",
      "15th Jan",
      "16th Jan",
      "17th Jan",
      "18th Jan",
      "19th Jan"
    ],
    datasets: [{
      label: "Listing Popularity",
      data: [
        1199,
        575,
        407,
        313,
        181,
        268
      ],
    }],
    customOptions: {
      featured: [
        false,
        false,
        false,
        false,
        false,
        true
      ]
    }
  }

  var ctx = document.getElementById('chartjs-chart').getContext('2d');
  var myChart = new Chart(ctx, {
    type: 'PPLine',
    data: chartData,
    options: {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true
          }
        }]
      }
    }
  });
});

我已经创建了一个扩展版本的线图，它在 featured 数组 customOptions 并增加一个路径，如果 featured 布尔函数返回 true

Chart.controllers.PPLine = Chart.controllers.line.extend({
  draw: function () {

    var that = this;
    var helpers = Chart.helpers;
    var xScale = that._xScale;
    var ctx = that.chart.ctx;


    // Draw chart
    Chart.controllers.line.prototype.draw.call(that, arguments);

    helpers.each(that.chart.data.customOptions.featured, function (featured, index) {
      var meta = that.chart.getDatasetMeta(0);
      var linePos = meta.data[index]._model.x,
        endLinePos = that.chart.options.elements.point.borderWidth + (meta.data[index + 1] ? meta.data[index + 1]._model.x : linePos);

      // Draw featured sections
      if (featured) {
        var centerX = meta.data[index]._model.x;
        var centerY = meta.data[index]._model.y;
        var radius = 30;

        // Draw boost circle
        ctx.save();
        ctx.beginPath();
        ctx.fillStyle = that.chart.data.customOptions.bumpedColour;
        ctx.lineWidth = 10;
        ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
        ctx.fill();
        ctx.restore();

        // Add text
        ctx.save();
        ctx.beginPath();
        ctx.fillStyle = "#fff";
        ctx.font = "10px " + that.chart.config.options.defaultFontFamily;
        ctx.fillText("Boost", centerX - (ctx.measureText('Boost').width / 2), centerY + 3);
        ctx.fill();
        ctx.restore();
      }
    });
  }
});

的最后一项时，问题就来了。featured 阵列是 true 和路径被加到点上，视觉上，路径被切断了，所以我需要在图上加一些填充物来防止这种情况。

在V1中，我可以在扩展线图中做如下操作......。

var that = this;
that.scale.xScalePaddingRight = 20;

但是，在v2对象里面，scale不是一个属性。在V1中，有一个 _xScale 财产 paddingRight 属性，但做下面的操作似乎并不能增加所需的padding，从而使路径不会被切断。

var that = this;
that._xScale.paddingRight = 20;

下面是一个 代码笔 的问题。

我不想在每个实例中都添加padding，只想在最后一个点被选中并绘制路径时添加。

任何帮助都将是非常感激的。

Answer 1

在选项中添加。

layout: {
    padding: {
        right: 20
    }
}