使用 chart.js 将折线图与分组条形图对齐

Question

线图数据点位于分组条形图每个标签的中心。

输入的数据都是列表。

渲染图表所需的插件是“npm install chart.js”、“npm install chartjs-plugin-datalabels --save”

我使用的代码是：

function draw_grouped_barchart(
  labels_data,
  billable_data,
  non_billable_data,
  total_data,
  bench_data
) {
  const max_y = Math.max(...total_data) * 1.25;
  var barChartData = {
    labels: labels_data,
    datasets: [
      {
        label: "HC",
        backgroundColor: "#64218f",
        borderColor: "#64218f",
        borderWidth: 1,
        data: total_data,
        order: 2,
      },
      {
        label: "Billable",
        backgroundColor: "#a83b8f",
        borderColor: "#a83b8f",
        borderWidth: 1,
        data: billable_data,
        order: 2,
      },
      {
        label: "Non Billable",
        backgroundColor: "#ed8394",
        borderColor: "#ed8394",
        borderWidth: 1,
        data: non_billable_data,
        order: 2,
      },
      {
        label: "Bench",
        backgroundColor: "#f8c7aa",
        borderColor: "#f8c7aa",
        borderWidth: 1,
        data: bench_data,
        order: 2,
      },
      {
        label: "Linear (HC)",
        data: total_data,
        fill: false,
        borderColor: "rgb(75, 192, 192)",
        tension: 0.1,
        type: "line",
        order: 1,
      },
    ],
  };
  var chartOptions = {
    responsive: true,
    plugins: {
      datalabels: {
        anchor: "end",
        align: "top",
        formatter: (value, context) =>
          context.datasetIndex !== 4 ? value : "",
        color: "#000000",
        font: {
          weight: "bold",
          size: 10,
        },
      },
      legend: {
        onClick: () => {
          return "";
        },
        position: "bottom",
        labels: {
          color: "#000000",
          font: {
            size: 10,
          },
          usePointStyle: true,
          generateLabels: (chart) => {
            let pointStyle = [];
            chart.data.datasets.forEach((dataset) => {
              if (dataset.type === "line") {
                pointStyle.push("line");
              } else {
                pointStyle.push("rect");
              }
            });
            return chart.data.datasets.map((dataset, index) => ({
              text: dataset.label,
              fillStyle: dataset.backgroundColor,
              strokeStyle: dataset.borderColor,
              pointStyle: pointStyle[index],
            }));
          },
        },
      },
      title: {
        display: false,
        text: "Allocations Projections (in FTE)",
      },
    },
    scales: {
      y: {
        display: false,
        beginAtZero: true,
        max: max_y,
      },
      x: {
        display: true,
        grid: {
          display: false,
        },
        ticks: {
          color: "#000000",
          font: {
            size: 10, //this change the font size
          },
        },
        border: {
          color: "#000000",
          width: 2,
          z: 1,
        },
      },
    },
  };
  Chart.register(ChartDataLabels);
  $("#canvas").remove();
  $("#mycanvas").append(
    '<canvas class="w-100" id="canvas" height="350"></canvas>'
  );
  var ctx = document.getElementById("canvas").getContext("2d");
  window.myBar = new Chart(ctx, {
    type: "bar",
    data: barChartData,
    options: chartOptions,
  });
}
 

我试过给出偏移和变换。它没有用。

我希望 HC 与线性 HC 内联。