我正在尝试制作一个水平条形图，在水平轴上的特定点上有3条重叠的垂直线。我使用的是ChartJS v2.8和注解插件（v 0.5.5）。我想为3条垂直线中的每一条添加一个绑定标签（用注解创建），如图所示。下面是我使用的脚本。

<canvas id="myChart" height="600" ></canvas>

JS脚本：

let     per10 = 3.718,
        per50 = 5,
        per90 = 6.282;

let scales =    ["SEMESTER 1","Course 1","Course 2","Course 3","Course 4",,"SEMESTER 2","Course 1","Course 2","Course 3","Course 4",,"SEMESTER 1","Course 1","Course 2","Course 3","Course 4",,"SEMESTER 1","Course 1","Course 2","Course 3","Course 4",,"SEMESTER 1","Course 1","Course 2","Course 3","Course 4",,"SEMESTER 1","Course 1","Course 2","Course 3","Course 4",,"Course 5"  ]

let scores =  [3.6, 6.1, 7.4, 4.7, 5.6, ,  5.9, 4.1, 3.9, 6.4, 5.9, ,  5.9, 4.1, 3.9, 6.4, 5.9, ,  5.9, 4.1, 3.9, 6.4, 5.9, ,  5.9, 4.1, 3.9, 6.4, 5.9, ,  5.9, 4.1, 3.9, 6.4, 5.9, ,7.5];

var ctx = document.getElementById("myChart");

  Chart.defaults.global.legend.display = false;
  Chart.defaults.global.tooltips.enabled = false;

var myChart = new Chart(ctx, {
  type: 'horizontalBar',

  data: {
    labels: scales,
    datasets: [{
        label: 'Score',
        display: false,
        showTooltip: false,
        data: scores,
        backgroundColor: 'royalBlue',
        borderColor: '#000000',
        borderWidth: 0,
        fill: false
      }
    ]
  },
  options: {
    responsive: true,
    showTooltips: false,
    scales: {
      yAxes: [{
        display: true,
        scaleLabel: {
          display: false,
        },
        ticks: {
          beginAtZero: true,
          fixedStepSize: 1
        },
        gridLines: {display: false}
      }],
      xAxes: [{
        display: true,
        min: 0,
        max: 8,
        scaleLabel: {
          display: false,
        },
        ticks: {
          autoSkip: false,
          stepSize: 2,
          beginAtZero: true,

        },
        position: 'bottom',
        gridLines: {display: false}

      }]
    },

    title: {
      display: true,
      text: 'Scores'
    },

    events: [],
    autocolors: false,

    annotation: {
      annotations: [
      {
        type: 'line',
        mode: 'vertical',
        scaleID: 'x-axis-0',
        value: per10,
        borderColor: '#db7093',
        borderWidth: 2, 
        label: {
            display: true,
          value: "10%"
        }
      },
      {
        type: 'line',
        mode: 'vertical',
        scaleID: 'x-axis-0',
        value: per50,
        borderColor: '#98fb98',
        borderWidth: 2, 
        label: {
            display: true,
          value: "50%"
        }
      },
      {
        type: 'line',
        mode: 'vertical',
        scaleID: 'x-axis-0',
        value: per90,
        borderColor: '#add8e6',
        borderWidth: 2, 
        label: {
            display: true,
          value: "90%"
        }
      },

      ]
    },

    animation: {
      duration: 0,
      onComplete: function() {
        var ctx = this.chart.ctx;
        ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
        ctx.textAlign = 'center';
        ctx.textBaseLine = 'bottom';
        ctx.fillStyle = 'white';
        this.data.datasets.forEach(function(dataset) {
          console.log(dataset);
          for (var i = 0; i < dataset.data.length; i++) {
            for (var key in dataset._meta) {
              var model = dataset._meta[key].data[i]._model;
              model.y = model.y + 4;
              model.x = model.x -12;

              if (dataset.data[i] < 0.75) {
                model.x = model.x + 5;
              };

              ctx.fillText(dataset.data[i], model.x, model.y);
            }
          }
        });
      }
    }
  }
});```

另一个问题：我怎样才能减少酒吧之间的空间？任何帮助将不胜感激。

JSFiddle