条形图左侧和右侧的标签（类别类型）使用chart.js？

Question

有没有办法在水平条形图的左右两侧放置标签？

标签属于某类＆＃39;类别＆＃39;类型，其中数据基本上是一个在两个类别之间的位置的度量（例如，内向 - 外向），因此得分1更接近于＆＃34;内向性＆＃34;在左边，得分10更接近＆＃34;外向＆＃34;在右边。

附上我现在所拥有的截图 - 标签只在左侧，所以我必须通过放置＆＃34;内向＆lt; - ＆gt;外向＆＃间接显示左/右34;而不是让它们在相反的一面。

我想做的是什么？

Answer 1

我建议使用两个yAx，一个在左边，另一个在右边，用于显示＆＃34; min / max＆＃34;类别标签。

此外，datalabels plugin在水平条上提供标注：

＆＃13;

＆＃13;

var chartData = {
  labels: ['Extraversion', 'Anxiety', 'Tough', 'Indipendence'],
  datasets: [{
    label: 'value',
    backgroundColor: 'rgba(219, 20, 0, 0.2)',
    borderColor: 'rgba(219, 20, 0, 0.8)',
    data: [60, 80, 55, 40],
		yAxisID: 'y0'
  }]
};

var ctx = document.getElementById("myChart").getContext("2d");
var myBar = new Chart(ctx, {
  type: 'horizontalBar',
  data: chartData,
  options: {
  	legend: { display: false },
    scales: {    
      yAxes: [{
        id: "y0",
        weight: 1,
        position: "left",
        type: 'category',
        display: false,
        gridLines: {
        	display: false
        },
        ticks: {
        	display: false,
          padding: 0
        }
      },{
        id: "y1",
        weight: 0,
        position: "left",
        type: 'category',
        labels: ['Intro', 'Low', 'Rec', 'Accom'],
        gridLines: {
        	display: false
        }
      },{
        id: "y2",
        position: "right",
        type: 'category',
        labels: ['Extra', 'High', 'Tough', 'Indipend'],
        gridLines: {
        	display: false
        }
      }],
      xAxes: [{
      	id: "x1",
        ticks: {
          beginAtZero: true
        }
      }],
    },
    plugins: {
      datalabels: {
        color: 'red',
        align: 'right',
        anchor: 'start',
        formatter: function(value, context) {
        		console.log(context)
          	return chartData.labels[context.dataIndex];
        }
      }
    }
  }
});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.2.0/dist/chartjs-plugin-datalabels.min.js"></script>

<canvas id="myChart" height="300" width="500"></canvas>

＆＃13;

＆＃13;

＆＃13;

更新：

作为替代方案，您可以绘制自己的标签onComplete（无需额外的插件）。以下是一个例子：

＆＃13;

＆＃13;

var chartData = {
  labels: ['Extraversion', 'Anxiety', 'Tough', 'Indipendence'],
  datasets: [{
    label: 'value',
    backgroundColor: 'rgba(219, 20, 0, 0.2)',
    borderColor: 'rgba(219, 20, 0, 0.8)',
    data: [60, 80, 55, 40],
    yAxisID: 'y0'
  }]
};
var y1Labels = ['Intro', 'Low', 'Rec', 'Accom'];
var y2Labels = ['Extra', 'High', 'Tough', 'Indipend'];

var ctx = document.getElementById("myChart").getContext("2d");
var myBar = new Chart(ctx, {
  type: 'horizontalBar',
  data: chartData,
  options: {
    legend: {
      display: false
    },
    layout: {
      padding: {
        left: 0,
        right: 50,
        top: 0,
        bottom: 0
      }
    },
    scales: {
      yAxes: [{
        id: "y0",
        weight: 1,
        position: "left",
        type: 'category',
        display: true,
        gridLines: {
          display: false
        },
        ticks: {
          display: true,
          fontStyle: 'bold',
          fontSize: 14
        }
      }, {
        id: "y1",
        position: "right",
        type: 'category',
        labels: ['Extra', 'High', 'Tough', 'Indipend'],
        ticks: {
          display: false,
          padding: 30
        },
        gridLines: {
          display: false
        }
      }],
      xAxes: [{
        id: "x1",
        ticks: {
          beginAtZero: true
        }
      }],
    },
    animation: {
      duration: 0,
      onComplete: function() {
        var chartInstance = this.chart;
        ctx.font = Chart.helpers.fontString(12, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
        ctx.fillStyle = 'red';
        ctx.textBaseline="bottom"; 

        this.data.datasets.forEach(function(dataset, i) {
          var meta = chartInstance.controller.getDatasetMeta(i);
          console.log(chartInstance, meta);

          var x0 = chartInstance.scales.y0.right;
          var x1 = chartInstance.scales.y1.left;

          meta.data.forEach(function(bar, index) {
            var label = y1Labels[index];
            var xOffset = x0 - 10 - ctx.measureText(label).width;
            var yOffset = bar._model.y - 15;
            ctx.fillText(label, xOffset, yOffset);

            var label = y2Labels[index];
            var xOffset = x1 + 10;
            var yOffset = bar._model.y - 15;
            ctx.fillText(label, xOffset, yOffset);
          });
        });
      }
    }
  }
});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="myChart" height="300" width="500"></canvas>

＆＃13;

＆＃13;

＆＃13;