javascript - 堆叠水平条未对齐图表 JS

Question

我正在尝试创建板球比赛的击球手合作伙伴关系图。

我正在尝试使用 Chart.js 创建堆叠水平条形图，但我遇到了条形图未对齐的问题。

下面和 codepen 上的我的代码。

var barOptions_stacked = {
  tooltips: {
    enabled: false
  },
  hover: {
    animationDuration: 0
  },
  scales: {
    xAxes: [{
      ticks: {
        display: false,
        stepSize: 30
      },
      scaleLabel: {
        display: false
      },
      gridLines: {
        display: true
      },
    }],
    yAxes: [{
      id: "y0",
      weight: 1,
      position: "left",
      labels: ["Rohit", "Rohit", "Kohli", "Nair", "kohli"],
      display: true,
      barThickness: 8,
      maxBarThickness: 10,
      barPercentage: 0.4,
      gridLines: {
        display: false
      },
      ticks: {
        display: true,
        beginAtZero: false,
        fontStyle: 'bold',
        fontSize: 14
      }
    }, {
      id: "y1",
      position: "right",
      type: 'category',
      stacked: true,
      labels: ["Dhawan", "Kohli", "Nair", "Kohli", "Jadeja"],
      barThickness: 8,
      maxBarThickness: 10,
      barPercentage: 0.4,
      gridLines: {
        display: false
      },
      ticks: {
        display: true,
        beginAtZero: false,
        fontStyle: 'bold',
        fontSize: 14
      }
    }]
  },
  legend: {
    display: false
  },
  maintainAspectRatio: false,
};

var ctx = document.getElementById("ps-chart");
var myChart = new Chart(ctx, {
  type: "horizontalBar",
  data: {
    datasets: [{
        data: [-20, -10, -45, -5, -35],
        yAxisID: 'y0',
        backgroundColor: "#21618C",
        hoverBackgroundColor: "rgba(50,90,100,1)"
      },
      {
        data: [30, 5, 20, 45, 50],
        yAxisID: 'y1',
        backgroundColor: "#85C1E9",
        hoverBackgroundColor: "rgba(140,85,100,1)"
      }
    ]
  },
  options: barOptions_stacked
});

Answer 1

如果您将 offset: true 添加到您的两个 yAxes，它就会起作用。

个人说明:如果您结合两个 yAxes 所需的代码，或者如果您在两个轴中使用一个轴中使用的属性，那么理解您的代码会容易得多。在您的代码中，一个 yAxis 有一些属性，另一个 yAxis 有其他属性......