如何使用chartjs将x轴值和线点移动到两条x轴线的中间？

Question

使用chartjs，我设置了以下图表：

function myFunction(){
    var options = {
      type: 'line',
      data: {
        labels: ["1", "2", "3", "4", "5"],
        datasets: [
            {
                data: [26, 26, 29, 28, 29],
                borderWidth: 2,
                fill: false,
                lineTension: 0
            },              
            {
                data: [26, 26, 33, 28, 30],
                borderWidth: 2,
                fill: false,
                lineTension: 0,
            }
        ]
      },
      options: {
        scales: {
            yAxes: [{
            display: false,
            ticks: {
                suggestedMin: 0,
                beginAtZero: true   
            }
          }]
        }
      }
    }

    var ctx = document.getElementById('chartJSContainer').getContext('2d');
    new Chart(ctx, options);
}

我想将点和x轴数字向右移动，以便它们位于轴线之间。 （例如：1和1之间的2； 2和3之间的2；等等。）请参见以下内容：

我怎样才能做到这一点？

Answer 1

这是您可以执行的操作：

ꜰɪʀꜱᴛ

将默认图表类型设置为bar ，如下所示：

var options = {
      type: 'bar',
      data: {
         ...

ꜱᴇᴄᴏɴᴅ

设置第一数据集的类型到line ，因为这样的：

...
datasets: [{
         type: 'line',
         data: [26, 26, 29, 28, 29],
         ...

ᴡᴏʀᴋɪɴɢᴇxᴀᴍᴘʟᴇ

 function myFunction() { var options = { type: 'bar', data: { labels: ["1", "2", "3", "4", "5"], datasets: [{ type: 'line', data: [26, 26, 29, 28, 29], borderColor: 'rgba(0, 119, 220, 1)', borderWidth: 2, fill: false, lineTension: 0 }, { data: [26, 26, 33, 28, 30], borderWidth: 2 }] }, options: { scales: { yAxes: [{ display: false, ticks: { suggestedMin: 0, beginAtZero: true } }] } } } var ctx = document.getElementById('chartJSContainer').getContext('2d'); new Chart(ctx, options); } myFunction(); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script> <canvas id="chartJSContainer"></canvas>