如何在 Google 条形图中分配条形颜色答案

【问题标题】：How to assign bar colors in Google bar chart如何在 Google 条形图中分配条形颜色
【发布时间】：2021-05-21 18:22:34
【问题描述】：

我有一个由两个数据系列构建的图表，每个系列都有 2 个值。如何使代表第一个系列中第一个值的条与代表第二个系列中第一个值的条具有不同的颜色。

这是我设置系列的方式。

chartData[0] = ['Type', 'Scheduled', 'Actual', {role: 'style'}]
                chartData[1] = ['Today', data['exchanges']['Planned']['Today'], data['exchanges']['Actual']['Today'], ''];
                chartData[2] = ['Overdue', data['exchanges']['Planned']['Overdue'], data['exchanges']['Actual']['Overdue'], ''];

然后我像这样设置系列选项：

series: [{color: "#001E60"}, {color: "#BDC667"}]

这为两个系列的第一个条设置相同的颜色，如下所示：

.
我想做的是将颜色#001E60 的过期栏的颜色设置为红色，但不知道该怎么做。

【问题讨论】：

标签： charts google-visualization bar-chart

【解决方案1】：

正如您所发现的，颜色和系列选项都为系列着色。

您必须使用样式角色为同一系列中的不同颜色的条着色。

样式角色列必须跟在它应该应用到的系列列之后。

您在示例中包含了样式角色，但仅包含一个系列，并且为空白。

chartData[0] = ['Type', 'Scheduled', {role: 'style'}, 'Actual', {role: 'style'}]
  chartData[1] = ['Today', data['exchanges']['Planned']['Today'], 'red', data['exchanges']['Actual']['Today'], 'green'];
  chartData[2] = ['Overdue', data['exchanges']['Planned']['Overdue'], 'blue', data['exchanges']['Actual']['Overdue'], 'green'];

【讨论】：

谢谢，效果很好，只需要交换“红色”和“蓝色”，因为我想要过期系列的红色。还有一个问题要处理。图例现在将蓝色显示为预定颜色，红色显示为实际颜色，并且根本不包括绿色。有什么方法可以自定义图例以包含所有三种颜色，蓝色表示“已计划”，绿色表示“实际”，红色表示“过期”？
我开始怀疑是否将其分成两个单独的图表是否更容易，一个用于今天，一个用于过期，每个都有自己的图例。
图例遵循颜色/系列选项中的颜色。样式角色将使图例无效。您可以使用单独的图表或构建自己的图例...
谢谢，我想这就是原因。我想我会将现有图表分成 2 个单独的图表，谢谢您的帮助。