如何在chart.js散点图的末尾添加垂直线

Question

这是我的图表选项的样子

options: {
    legend: {
      display: false
    },
    scales: {
      xAxes: [
        {
          type: "time",
          gridLines: {
            display: false
          },
          ticks: {
            padding: 15
          }
        }
      ],
      yAxes: [
        {
          ticks: {
            padding: 22,
            min: 1,
            max: 5,
            stepSize: 1
          },
          position: "left",
          gridLines: {
            drawTicks: false
          }
        }
      ]
    }
  }

如您所见，有一个选项

gridLines: {
            display: false
          },

因此，图表上没有垂直线。

我想做的是在图表的末尾（图表的右侧）仅添加一条垂直线。这是我的现场示例https://codesandbox.io/s/line-chart-with-vanilla-js-and-chartjs-pi9fn?file=/src/index.js

Answer 1

此选项不可用（很奇怪-您应该打开GitHub功能要求）。

仅zeroLineWidth（0）索引可用。

myObj = [
  {
    "ID": "1",
    "Data": 30,
    "backgroundColor": "red"
  },
  {
    "ID": "2",
    "Data": 50,
    "backgroundColor": "violet"
  }
]

var labels = [];
var data = [];
var backgroundColor = [];

myObj.forEach((item) => {
  console.log('ID: ' + item.ID + '| Data: ' + item.Data + '| background: ' + item.backgroundColor);
  labels.push(item.ID);
  data.push(item.Data);
  backgroundColor.push(item.backgroundColor);
});

var data = {
  labels: labels,
  datasets: [{
    /* data */
    label: "Population (millions)",
    backgroundColor: backgroundColor,
    data: data
  }]
};

var options = {
  scales: {
    xAxes: [{
      stacked: true,
      gridLines: {
        color: "red",
        drawOnChartArea: true,
        lineWidth: 0,
        zeroLineColor: "orange",
        zeroLineWidth: 22
      }   
    }],
    yAxes: [{
      stacked: true,
      gridLines: {
      }   
    }]
  }
};

var myChart = new Chart(document.getElementById("chart"), {
  type: 'bar',
  data: data,
  options: options
});

<canvas id="chart"></canvas>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>

目前，一种“愚蠢”的解决方案是为画布设置右边界（但是看起来不太好）。 
canvas{
  border-right: 1px solid red;
}