ChartJS 為水平條形圖上的垂直線添加動態標簽

Question

我正在嘗試在水平軸上的特定點獲得一個帶有 3 條疊加垂直線的水平條形圖。 我正在使用 ChartJS v2.8 和注釋插件（v 0.5.5）。 我想將綁定 label 添加到 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

Answer 1

由於您使用的是舊版本的 chartjs-plugin-annotation，因此您需要在此處查閱 Line Annotations 的相關文檔。

這將引導您找到以下解決方案

annotation: {
  annotations: [
  {
    type: 'line',
    mode: 'vertical',
    scaleID: 'x-axis-0',
    value: per10,
    borderColor: '#db7093',
    borderWidth: 2, 
    label: {
      enabled: true,
      xAdjust: -22,
      content: '10%',
      backgroundColor: '#ffffff',
      fontSize: 14,          
      fontColor: '#db7093',
      position: 'top'
    }
  },
  ...

請查看您修改后的JSFiddle ，看看它是如何工作的。

Answer 2

要在行注釋中定義 label，對於 0.55 版本，您必須使用enabled和content ，而不是display和value 。

annotation: {
  annotations: [
  {
    type: 'line',
    mode: 'vertical',
    scaleID: 'x-axis-0',
    value: per10,
    borderColor: 'red',
    borderWidth: 2, 
    label: {
      enabled: true, // <-- not display
      content: "10%", // <-- not value
      position: "top"
    }
  },
  {
    type: 'line',
    mode: 'vertical',
    scaleID: 'x-axis-0',
    value: per50,
    borderColor: '#98fb98',
    borderWidth: 2, 
    label: {
      enabled: true, // <-- not display
      content: "50%", // <-- not value
      position: "top"
    }
  },
  {
    type: 'line',
    mode: 'vertical',
    scaleID: 'x-axis-0',
    value: per90,
    borderColor: '#add8e6',
    borderWidth: 2, 
    label: {
      enabled: true, // <-- not display
      content: "90%", // <-- not value
      position: "top"
    }
  },
  ]
},