ChartJS设置默认Y轴关联指定数据集，提升图表可视性

你的问题核心是两个数据集数值量级差距过大，导致小数值的「Activities」柱子被压缩得几乎不可见。以下是几种可行的实现方案：

方案一：使用双Y轴（推荐） #

给两个数据集分别绑定独立Y轴，让每个轴的范围适配对应数据集的数值，彻底解决量级差距问题。

修改后的代码：

const ctx = document.getElementById('my-chart').getContext('2d');

new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    datasets: [
      {
        label: 'Activities',
        backgroundColor: '#000',
        data: [5, 33, 24, 6, 14, 5, 8, 10, 5, 4, 0, 0],
        yAxisID: 'y' // 绑定到左侧Y轴
      },
      {
        label: 'Grand total',
        backgroundColor: '#eb4034',
        data: [0, 300.96, 482.98, 153.75, 463.71, 70.36, 3025.80, 1142.00, 2266.89, 1660.50, 0, 0],
        yAxisID: 'y1' // 绑定到右侧Y轴
      },
    ]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    tooltips: {
      mode: 'index',
      intersect: false,
    },
    hover: {
      mode: 'nearest',
      intersect: true
    },
    scales: {
      x: { // Chart.js 3.x 语法：用x替代原xAxes数组
        grid: {
          display: false
        }
      },
      y: { // 左侧Y轴，适配Activities数值范围
        grid: {
          display: true,
          color: '#d9dffa',
          drawBorder: false,
          drawTicks: false,
          borderDash: [3,5],
          zeroLineWidth: 1,
          zeroLineColor: '#d9dffa',
          zeroLineBorderDash: [3,4]
        },
        title: {
          display: true,
          text: 'Activities'
        }
      },
      y1: { // 右侧Y轴，适配Grand total数值范围
        position: 'right',
        grid: {
          display: false // 隐藏右侧网格避免重叠
        },
        title: {
          display: true,
          text: 'Grand Total'
        },
        ticks: {
          color: '#eb4034' // 刻度颜色与对应数据集一致
        }
      }
    },
    legend: {
      display: true // 显示图例区分两个系列
    }
  }
});

关键改动：

• 给每个数据集添加yAxisID属性，指定绑定的Y轴
• 适配Chart.js 3.x语法，将原2.x的xAxes/yAxes数组改为x/y单个对象
• 分别配置左右Y轴的样式、范围，让数据展示更合理

方案二：混合图表类型 #

将「Activities」改为折线图，与「Grand total」的柱状图混合显示，折线即使数值小也能清晰展示。

修改后的代码：

const ctx = document.getElementById('my-chart').getContext('2d');

new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    datasets: [
      {
        label: 'Activities',
        borderColor: '#000',
        backgroundColor: 'rgba(0,0,0,0.2)',
        borderWidth: 2,
        pointRadius: 4,
        data: [5, 33, 24, 6, 14, 5, 8, 10, 5, 4, 0, 0],
        type: 'line' // 指定为折线图类型
      },
      {
        label: 'Grand total',
        backgroundColor: '#eb4034',
        data: [0, 300.96, 482.98, 153.75, 463.71, 70.36, 3025.80, 1142.00, 2266.89, 1660.50, 0, 0],
      },
    ]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    tooltips: {
      mode: 'index',
      intersect: false,
    },
    hover: {
      mode: 'nearest',
      intersect: true
    },
    scales: {
      x: {
        grid: {
          display: false
        }
      },
      y: {
        grid: {
          display: true,
          color: '#d9dffa',
          drawBorder: false,
          drawTicks: false,
          borderDash: [3,5],
          zeroLineWidth: 1,
          zeroLineColor: '#d9dffa',
          zeroLineBorderDash: [3,4]
        }
      }
    },
    legend: {
      display: true
    }
  }
});

关键改动：

• 给「Activities」数据集添加type: 'line'，强制使用折线图
• 调整折线的边框颜色、点半径等样式，提升辨识度

方案三：调整Y轴范围适配小数据集 #

如果只需重点展示「Activities」，可以将默认Y轴范围设置为适配它的数值，「Grand total」的柱子会超出轴范围，但可通过tooltip查看具体数值。

修改后的核心配置：

scales: {
  // ...其他配置
  y: {
    grid: { /* 保留原样式配置 */ },
    min: 0,
    max: 40 // 适配Activities的最大值33
  }
}

方案四：优化柱子样式增强辨识度 #

通过调整「Activities」柱子的边框、透明度等样式，让小柱子更显眼（建议和其他方案配合使用）：

{
  label: 'Activities',
  backgroundColor: 'rgba(0,0,0,0.7)',
  borderColor: '#000',
  borderWidth: 1,
  data: [5, 33, 24, 6, 14, 5, 8, 10, 5, 4, 0, 0],
}

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