ChartJS：y轴的正负部分有两个标题。

Question

我在ChartJS中使用堆叠条形图来绘制两个相反数据集的数字。我是通过从0中减去第二个数据集的数字来实现的，因此我们得到[-1, -2, -3]而不是[1, 2, 3]。

通常我们会通过一个图例来识别这两个数据集。

但是，有没有一个选项可以在y轴上添加两个标题，y轴的顶部，也就是在刻度线的正向部分，标注为 "数据集1"，y轴的底部，也就是在刻度线的负向部分，标注为 "数据集2"？

Answer 1

你可以直接在画布上使用以下方法绘制Y轴的刻度标签 插件核心API. 它提供了许多钩子，可以用来执行自定义代码。在你的情况下，你可以使用 afterDraw 钩子，如下所示。

plugins: [{
  afterDraw: chart => {
    var ctx = chart.chart.ctx;
    ctx.save();
    var xAxis = chart.scales["x-axis-0"];
    var yAxis = chart.scales["y-axis-0"];
    ctx.fillStyle = "rgba(0, 0, 0, 0.8)";
    ctx.textAlign = "center";
    var fontSize = 12;
    ctx.font = fontSize + "px Arial";
    ctx.rotate(-Math.PI / 2);
    var yZero = yAxis.getPixelForValue(0);
    ctx.fillText("Dataset 1", yZero / -2, fontSize);
    ctx.fillText("Dataset 2", (yAxis.bottom + yZero) / -2, fontSize);
    ctx.restore();
  }
}],

你还需要为 layout.padding.left 内的图表选项，以避免您的刻度标签与刻度线标签重叠。

options: {
  layout: {
    padding: {
      left: 12
    }
  },

请看下面的可运行代码片段。

new Chart(document.getElementById("chart"), {
  type: "bar",
  plugins: [{
    afterDraw: chart => {
      var ctx = chart.chart.ctx;
      ctx.save();
      var xAxis = chart.scales["x-axis-0"];
      var yAxis = chart.scales["y-axis-0"];
      ctx.fillStyle = "rgba(0, 0, 0, 0.8)";
      ctx.textAlign = "center";
      var fontSize = 12;
      ctx.font = fontSize + "px Arial";
      ctx.rotate(-Math.PI / 2);            
      var yZero = yAxis.getPixelForValue(0);
      ctx.fillText("Dataset 1", yZero / -2, fontSize);
      ctx.fillText("Dataset 2", (yAxis.bottom + yZero) / -2, fontSize);
      ctx.restore();
    }
  }],
  data: {
    labels: ["A", "B", "C"],
    datasets: [{
        label: "Dataset 1",
        data: [1, 2, 3],
        backgroundColor: ["rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)", "rgba(255, 205, 86, 0.2)", "rgba(75, 192, 192, 0.2)"],
        borderColor: ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)"],
        borderWidth: 1
      },
      {
        label: "Dataset 2",
        data: [-1, -2, -3],
        backgroundColor: ["rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)", "rgba(255, 205, 86, 0.2)", "rgba(75, 192, 192, 0.2)"],
        borderColor: ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)"],
        borderWidth: 1
      }
    ]
  },
  options: {
    layout: {
      padding: {
        left: 12
      }
    },
    legend: {
      display: false
    },
    scales: {
      xAxes: [{
        stacked: true,
      }],
      yAxes: [{
        stacked: true
      }]
    }
  }
});

canvas {
  max-width: 400px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="chart" height="200"></canvas>