Google Charts柱状/条形图：自定义图例名称与分色列的实现问题

我来帮你搞定这个问题！你遇到的核心问题是数据结构没匹配Google Charts的要求，加上缺少对系列名称和颜色的配置。下面是修改后的完整代码，我会一步步给你解释清楚：

步骤1：正确构建DataTable #

Google Charts需要明确的列定义，我们要把产品名称作为独立系列，数值作为对应的数据。考虑到你的数据里有两个product2条目，我会给它们加上索引后缀区分（比如product2-1和product2-2），如果你想合并相同产品的数值，也可以在数据处理阶段做求和/平均操作。

步骤2：配置图表选项 #

我们要在options里指定每个系列的名称、对应颜色，同时调整图例的显示位置和样式。

修改后的完整代码 #

google.charts.load('current', { packages: ['corechart'] }).then(function () {
  $.ajax({
    url: 'path to data',
    dataType: 'json'
  }).done(function (jsonData) {
    // 1. 处理数据，构建符合要求的DataTable
    var data = new google.visualization.DataTable();
    // 添加一个通用类别列（用于承载所有产品系列）
    data.addColumn('string', '类别');
    
    // 遍历原始数据，为每个产品创建系列列，并记录系列的名称和颜色
    var seriesConfig = [];
    // 自定义颜色池，可根据需求扩展
    var colorPool = ['#3366CC', '#DC3912', '#FF9900', '#109618', '#990099'];
    jsonData.forEach(function(item, index) {
      var productName = item[0];
      // 处理重复产品名，添加索引后缀避免图例重复
      if (jsonData.filter(i => i[0] === productName).length > 1) {
        productName += `-${index + 1}`;
      }
      // 添加数值列，列名就是产品名（用于图例显示）
      data.addColumn('number', productName);
      // 记录当前系列的名称和对应颜色
      seriesConfig.push({
        name: productName,
        color: colorPool[index % colorPool.length] // 循环使用颜色池
      });
    });
    
    // 组装数据行：类别+所有产品的数值
    var dataRow = ['产品对比'];
    jsonData.forEach(function(item) {
      dataRow.push(item[1]);
    });
    data.addRow(dataRow);

    // 2. 配置图表选项
    var options = {
      title: '产品数值对比',
      legend: { position: 'top', textStyle: { fontSize: 12 } }, // 图例位置和样式
      series: seriesConfig, // 绑定系列的名称和颜色
      bar: { groupWidth: '75%' }, // 柱子宽度调整
      vAxis: { title: '数值', minValue: 0 }, // y轴配置
      hAxis: { title: '产品' } // x轴配置（如果是条形图，这里和vAxis互换即可）
    };

    // 3. 绘制图表（柱状图用ColumnChart，条形图换成BarChart）
    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }).fail(function(error) {
    console.error('加载数据失败:', error);
  });
});

关键修改点说明 #

• DataTable结构调整：先添加一个类别列，再为每个产品条目创建独立的数值列，确保每个产品对应一个系列，这样图例就会显示产品名称而非数值。
• 重复产品处理：对重复的产品名添加索引后缀，避免图例出现重复名称，同时保留原始数据的独立性。
• 系列颜色配置：通过series选项为每个系列绑定自定义颜色，循环使用颜色池保证每个柱子颜色不同。
• 图表类型切换：如果需要条形图，只需把ColumnChart替换为BarChart，并互换vAxis和hAxis的配置即可。

可选：合并相同产品的数值 #

如果你希望把相同产品的数值合并（比如两个product2的数值求和），可以先添加这段数据处理逻辑：

// 合并相同产品的数据（这里以求和为例，也可以改成取平均）
var mergedData = {};
jsonData.forEach(function(item) {
  var product = item[0];
  var value = item[1];
  mergedData[product] = (mergedData[product] || 0) + value;
});
// 转换回数组格式，之后用这个processedData代替原始jsonData即可
var processedData = Object.entries(mergedData);

这样处理后，图例只会显示product1和product2，每个对应一个合并后的柱子，颜色依然不同。

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