Google Charts堆叠柱状图：如何为每列设置两种不同颜色

没问题！我来帮你搞定这个需求——基于你提供的DataTable数据，实现每个列（对应一个VehicleGroup）包含两种不同颜色的堆叠柱状图。从代码写法来看，我默认你用的是Google Charts，下面是完整的可落地方案：

完整代码示例 #

// 初始化你提供的原始DataTable
const drivingData = new google.visualization.DataTable();
drivingData.addColumn('string', 'VehicleGroup');
drivingData.addColumn('number', 'TimeType');
drivingData.addColumn('number', 'TimeTarget');
drivingData.addColumn('number', 'TimeUsed');
drivingData.addRow(['Trucks-S',0, 1000, 1200]);
drivingData.addRow(['Trucks-F',1, 300, 500]);
drivingData.addRow(['Trailer-S',0, 1200, 1500]);
drivingData.addRow(['Trailer-F',1, 100, 500]);

// 转换数据为堆叠图表适配格式：把TimeTarget和TimeUsed拆分为独立系列
const stackedChartData = new google.visualization.DataTable();
stackedChartData.addColumn('string', 'VehicleGroup');
stackedChartData.addColumn('number', 'TimeTarget');
stackedChartData.addColumn('number', 'TimeUsed');

// 同时记录每个VehicleGroup对应的TimeType，用于自定义颜色（可选）
const groupTimeTypeMap = {};
drivingData.forEachRow(row => {
  const groupName = row[0];
  const timeType = row[1];
  const targetTime = row[2];
  const usedTime = row[3];
  
  stackedChartData.addRow([groupName, targetTime, usedTime]);
  groupTimeTypeMap[groupName] = timeType;
});

// 配置图表核心选项
const chartOptions = {
  title: '车辆用时目标vs实际（堆叠对比）',
  isStacked: true, // 必须开启！启用堆叠柱状图模式
  hAxis: { title: '车辆组别' },
  vAxis: { title: '用时' },
  legend: { position: 'top', alignment: 'center' },
  // 基础方案：给两个系列固定颜色（每个柱子的两个堆叠块颜色统一）
  colors: ['#2563EB', '#F97316'], // TimeTarget用蓝色，TimeUsed用橙色
  // 进阶方案：根据TimeType给同系列的不同组设置深浅色（可选）
  series: {
    0: { // TimeTarget系列
      style: (dataTable, rowIndex) => {
        const group = dataTable.getValue(rowIndex, 0);
        return groupTimeTypeMap[group] === 0 ? '#2563EB' : '#1D4ED8';
      }
    },
    1: { // TimeUsed系列
      style: (dataTable, rowIndex) => {
        const group = dataTable.getValue(rowIndex, 0);
        return groupTimeTypeMap[group] === 0 ? '#F97316' : '#EA580C';
      }
    }
  }
};

// 渲染图表（需要提前在HTML中添加容器：<div id="stacked-chart" style="width: 800px; height: 450px;"></div>）
const chart = new google.visualization.ColumnChart(document.getElementById('stacked-chart'));
chart.draw(stackedChartData, chartOptions);

关键要点拆解 #

• 数据转换：Google Charts的堆叠柱状图要求每个堆叠项是独立的列，所以我们把原始数据里的TimeTarget和TimeUsed拆成两个系列，保留VehicleGroup作为x轴的分类项。
• 堆叠模式开启：通过chartOptions.isStacked = true开启堆叠功能，这是实现效果的核心配置。
• 颜色控制：
  • 基础版：直接用colors数组给两个系列固定颜色，这样所有柱子的TimeTarget块都是蓝色，TimeUsed块都是橙色，满足“每列两种不同颜色”的基础需求。
  • 进阶版：利用series.style结合TimeType，给不同类型的车辆组设置深浅不同的同系列颜色，既保持每列双颜色，又能让同TimeType的组视觉上更统一。
• 容器准备：记得在HTML页面中提前创建用于渲染图表的DOM容器，设置合适的宽高。

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