ChartJS在水平条形图的垂直线上添加动态标签

6g8kf2rb  于 2022-11-06  发布在  Chart.js
关注(0)|答案(2)|浏览(195)

我正在尝试制作一个水平条形图,在水平轴上的特定点上有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

bbmckpt7

bbmckpt71#

由于您使用的是旧版本的chartjs-plugin-annotation,因此需要在此处查阅行注解的相关文档。
这将引导您找到以下解决方案

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,看看它是如何工作的。

eqfvzcg8

eqfvzcg82#

若要在缐条注解中定义标示,对于0.55版,您必须使用enabledcontent,而不是displayvalue

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"
    }
  },
  ]
},

相关问题