Javascript 谷歌图表组栏

我有一张和这张相似的图片。 每列都有自己的颜色（颜色在每列中重复）。 但在传说中只会出现：绿色，蓝色，红色

有什么办法吗？

---

谢谢你

听起来你想为每个人创建一个系列 为此，每组值都需要位于数据表中自己的列中

类似于

var data = google.visualization.arrayToDataTable([
  ['Hora', 'Region not exceeded', 'Accepted Region', 'Region exceeded'],
  ["-04:00", 1, null, null],
  ["00:00", null, 1902, null],
  ["+13:30", null, null, 0],
  ...

然后您可以使用颜色图表选项指定颜色

colors: ['#00f', '#0f0', '#f00']

您还可以使用数据视图将数据表转换为这种格式 请参阅以下工作片段

在这里，我不确定如何确定颜色何时改变， 因此，数据表中提供的颜色用于确定哪列获得该值

google.charts.load'current'{ 软件包：['corechart'] }.Then函数{ window.addEventListener'resize'，drawChart，false； 图纸； }; 功能图{ var data=google.visualization.arrayToDataTable[ ['Hora'，'Inicio'，{role:'style'}]， [-04:00,1，颜色：00f]， [-03:30,1，颜色：00f]， [-03:00,5，颜色：00f]， [-02:30,9，颜色：00f]， [-02:00,12，颜色：00f]， [-01:30,48，颜色：00f]， [-01:00,65，颜色：0f0]， [-00:30663，颜色：0f0]， [00:001902，颜色：0f0]， [+00:30996，颜色：0f0]， [+01:00755，颜色：0f0]， [+01:30296，颜色：f00]， [+02:00172，颜色：f00]， [+02:30114，颜色：f00]， [+03:00,83，颜色：f00]， [+03:30,65，颜色：f00]， [+04:00,45，颜色：f00]， [+04:30,40，颜色：f00]， [+05:00,31，颜色：f00]， [+05:30,32，颜色：f00]， [+06:00,23，颜色：f00]， [+06:30,20，颜色：f00]， [+07:00,6，颜色：f00]， [+07:30,1，颜色：f00]， [+08:00,1，颜色：f00]， [+08:30,1，颜色：f00]， [+09:00,2，颜色：f00]， [+09:30,0，颜色：f00]， [+10:00,0，颜色：f00]， [+10:30,0，颜色：f00]， [+11:00,0，颜色：f00]， [+11:30,1，颜色：f00]， [+12:00,0，颜色：f00]， [+12:30,0，颜色：f00]， [+13:00,1，颜色：f00]， [+13:30,0，颜色：f00] ]; var view=new google.visualization.DataViewdata； view.setColumns[0， { 标签：“未超出区域”， 计算：函数dt，第行{ var值=null； 如果dt.getValuerow，则2=='color:00f'{ value=dt.getValuerow，1； } 返回值； }, 键入：“数字” }, { 标签：“已接受区域”， 计算：函数dt，第行{ var值=null； 如果dt.getValuerow，则2=='color:0f0'{ value=dt.getValuerow，1； } 返回值； }, 键入：“数字” }, { 标签：“超出区域”， 计算：函数dt，第行{ var值=null； 如果dt.getValuerow，则2==“颜色：f00”{ value=dt.getValuerow，1； } 返回值； }, 键入：“数字” } ]; 变量选项={ 颜色：['00f'，'0f0'，'f00']， 酒吧：{ groupWidth:“100%” }, 图例：{ 对齐：“结束”， 位置：'顶部' }, 宽度：“100%”， 身高：400， 标题：“Quurgicos模”， 图表区：{ 高度：“100%”， 宽度：“100%”， 前48名， 左：72， 右：16， 底数：72 }, 哈克斯：{ 标题：“Hora”， 最小值：0 }, 言辞：{ 标题：“模数” } }; var chart=new google.visualization.ColumnChartdocument.getElementById'chart_div'； chart.drawview，选项； }

---

确切地说，我不知道如何将它们分组。我用绿色、红色或蓝色绘制了每个条。我只想在图例中说明每种颜色的含义。或者，如果有可能对酒吧进行分组，那么必须保持秩序，这就是为什么我不能使用系列。我想我没有解释清楚。我有一套从-X小时到X小时的酒吧。类似于以0为中心的高斯分布。我想要的是画一种不同的颜色，左边是无限，-Y]小时，右边是从[Z，无穷大。由于我不知道另一种技术，所以我将每个条画成特定的颜色。我想添加一个简单的图例：+绿色：接受区域。+红色：超出区域。+蓝色：未超出区域。以下是我正在使用的代码示例：非常感谢！这正是我想要的。还有两个问题：我可以消除吗e或减少条间距？假设我有两个直方图，我必须将它们组合起来，即每个小时有两个条。我可以在不添加新序列的情况下这样做吗？这就是我的意思：或者我应该添加以下序列：超出区域开始、未超出区域开始、接受区域开始、超出区域结束、未超出区域结束，接受区域结束。再次感谢您的帮助。这是多系列柱状图的问题，每小时为每个系列分配空间，即使是空值-选项在条形图上方使用。groupWidth:“100%”删除条形图之间的所有空间，但每个点缺少两个条形图-添加

---

更多的列/系列只会让事情变得更糟-你最好使用样式列的颜色和建立自己的传奇…如果它是它所认为的。。。有一些方法可以通过按钮选择特定的条。这基本上是因为当你把鼠标放在一个标签上的图例接受区域的例子，选择一些特定的酒吧，我想模拟这在我自己的图例。谢谢你的帮助！谢谢这就是我要找的！

colors: ['#00f', '#0f0', '#f00']