如何调整Combo-Bar-Line图表：折线图增初始点且居中对齐柱状图

问题描述 #

需要制作一款Combo-Bar-Line图表：

• 柱状图呈现月度金额差值
• 折线图呈现累计总额
  已知初始金额为9,218.06，最终金额为3,336.55，当前图表无法展示初始金额，需实现两个效果：

1. 折线图的数据点水平居中于相邻两个柱状图之间
2. 为折线图添加初始金额作为首个数据点

原实现代码如下：

JavaScript代码 #

const comboChart_all = new Chart(document.getElementById('canvas-balances-all'), {
  type: 'bar', // Tipo di grafico principale (bar)
  data: {
    labels: ['2022-08', '2022-09', '2022-10', '2022-11', '2022-12', '2023-01', '2023-02', '2023-03', '2023-04', '2023-05', '2023-06', '2023-07', '2023-08', '2023-09', '2023-10', '2023-11', '2023-12', '2024-01', '2024-02', '2024-03', '2024-04', '2024-05', '2024-06', '2024-07', '2024-08'],
    datasets: [
      { 
        label: 'Total for Month',
        type: 'bar', // Tipo di dataset
        data: [-2858.18, 2014.21, 3060.16, -5606.27, 7070.87, -208.27, -5702.15, -244.05, 754.22, 375.52, -1002.45, -1145.54, 1118.56, -5210.75, -215.21, -3383.08, 1570.59, 2394.53, -1864.91, -146.8, 62.89, 1354.87, -4995.44, 4563.65, -2638.48],
        backgroundColor: 'rgba(180, 180, 180, 0.5)',
        borderColor: 'rgba(180, 180, 180, 0.8)',
        borderWidth: 1
      },
      {
        label: 'Cumulative Total',
        type: 'line', // Tipo di dataset
        data: [11359.88, 13374.09, 16434.25, 10827.98, 17898.85, 17690.58, 11988.43, 11744.38, 12498.6, 12874.12, 11871.67, 10726.13, 11844.69, 6633.94, 6418.73, 3035.65, 4606.24, 7000.77, 5135.86, 4989.06, 5051.95, 6406.82, 1411.38, 5975.03, 3336.55],
        backgroundColor: 'rgba(151, 187, 205, 0.2)',
        borderColor: 'rgba(151, 187, 205, 1)',
        fill: false, // La linea non deve essere riempita sotto
        borderWidth: 2
      }
    ]
  },
  options: {
    responsive: true
  }
});

HTML代码 #

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div class="c-chart-wrapper">
  <canvas id="canvas-balances-all"></canvas>
</div>

解决方案 #

1. 添加初始金额作为折线图首个数据点 #

在折线数据集的data数组最前端插入初始金额9218.06，让折线从初始累计值开始绘制：

{
  label: 'Cumulative Total',
  type: 'line',
  // 插入初始金额作为第一个数据点
  data: [9218.06, 11359.88, 13374.09, 16434.25, 10827.98, 17898.85, 17690.58, 11988.43, 11744.38, 12498.6, 12874.12, 11871.67, 10726.13, 11844.69, 6633.94, 6418.73, 3035.65, 4606.24, 7000.77, 5135.86, 4989.06, 5051.95, 6406.82, 1411.38, 5975.03, 3336.55],
  // 其他配置保持不变
}

2. 让折线图数据点水平居中于相邻柱状图之间 #

通过以下配置实现：

• 为折线数据集添加offset: true：该属性会使折线数据点偏移到柱状图的间隙位置；
• 调整柱状图的barPercentage和categoryPercentage：控制柱子宽度，确保间隙足够容纳折线点；
• 在x轴配置中设置offset: true：让x轴刻度与柱子对齐，折线点自然落在相邻柱子的中间位置。

完整修改后的代码 #

const comboChart_all = new Chart(document.getElementById('canvas-balances-all'), {
  type: 'bar',
  data: {
    labels: ['2022-08', '2022-09', '2022-10', '2022-11', '2022-12', '2023-01', '2023-02', '2023-03', '2023-04', '2023-05', '2023-06', '2023-07', '2023-08', '2023-09', '2023-10', '2023-11', '2023-12', '2024-01', '2024-02', '2024-03', '2024-04', '2024-05', '2024-06', '2024-07', '2024-08'],
    datasets: [
      { 
        label: 'Total for Month',
        type: 'bar',
        data: [-2858.18, 2014.21, 3060.16, -5606.27, 7070.87, -208.27, -5702.15, -244.05, 754.22, 375.52, -1002.45, -1145.54, 1118.56, -5210.75, -215.21, -3383.08, 1570.59, 2394.53, -1864.91, -146.8, 62.89, 1354.87, -4995.44, 4563.65, -2638.48],
        backgroundColor: 'rgba(180, 180, 180, 0.5)',
        borderColor: 'rgba(180, 180, 180, 0.8)',
        borderWidth: 1,
        // 调整柱子宽度，保证间隙足够
        barPercentage: 0.8,
        categoryPercentage: 0.8
      },
      {
        label: 'Cumulative Total',
        type: 'line',
        data: [9218.06, 11359.88, 13374.09, 16434.25, 10827.98, 17898.85, 17690.58, 11988.43, 11744.38, 12498.6, 12874.12, 11871.67, 10726.13, 11844.69, 6633.94, 6418.73, 3035.65, 4606.24, 7000.77, 5135.86, 4989.06, 5051.95, 6406.82, 1411.38, 5975.03, 3336.55],
        backgroundColor: 'rgba(151, 187, 205, 0.2)',
        borderColor: 'rgba(151, 187, 205, 1)',
        fill: false,
        borderWidth: 2,
        // 开启偏移，使折线点落在柱子间隙
        offset: true
      }
    ]
  },
  options: {
    responsive: true,
    scales: {
      x: {
        // 让x轴刻度与柱子对齐，折线点自然居中
        offset: true
      }
    }
  }
});

效果说明 #

• 折线图从初始金额9218.06开始绘制，首个数据点显示在第一个柱状图的左侧；
• 所有折线数据点均水平居中于相邻柱状图的间隙，完美匹配累计总额的时间逻辑（累计值为月度结束后的结果，对应两个月份的节点）。

内容的提问来源于stack exchange，提问作者Razzo