Charts 谷歌图表柱形图的颜色

我有来自同一源数据的饼图和柱状图

---

我希望条形图中的颜色与饼图中的颜色相同。这些是默认的谷歌图表颜色（按顺序）。所以第一列应该是蓝色，第二列是红色，第三列是黄色，第四列是绿色。如何实现这一点？

在柱状图中，同一系列中的值默认为相同的颜色

系列由列定义，默认情况下具有不同的颜色，
将每个值放在单独的列中

然而，这带来了一个问题

如果按以下方式构造数据，则会丢失x轴标签
所有列只有一个标签

var data = google.visualization.arrayToDataTable([
  ['x', 'y0', 'y1', 'y2', 'y3'],
  ['Razina0', 898, 37319, 8980, 35400]
]);

如果尝试下一种方法，则列的间距将不正确
空值将有间隙

var data = google.visualization.arrayToDataTable([
  ['x', 'y0', 'y1', 'y2', 'y3'],
  ['Razina0', 898, null, null, null],
  ['Razina1', null, 37319, null, null],
  ['Razina2', null, null, 8980, null],
  ['Razina3', null, null, null, 35400],
]);

最好的选择是使用样式列
这将允许您保留当前的数据结构
并为每列提供不同的颜色

唯一的缺点是您必须提供颜色
因此，您将丢失默认颜色

---

因此，建议先绘制饼图
然后使用分配给每个切片的颜色
当饼图的

'ready'

事件触发时

请参阅以下工作片段

google.charts.load（'current'{
回调：图纸，
软件包：['corechart']
});
函数绘图图（）{
var data=google.visualization.arrayToDataTable([
['x'，'y0']，
[Razina0'，898]，
[Razina1'，37319]，
[Razina2'，8980]，
[Razina3'，35400]
]);
var chartPie=new google.visualization.PieChart（document.getElementById（'chart_pie'）；
var chartColumn=new google.visualization.ColumnChart（document.getElementById（'chart_column'））；
google.visualization.events.addListener（chartPie'ready'，function（）{
var colIndex=data.addColumn（{type:'string'，role:'style'}）；
$.each（$（'#图表_饼图路径'），函数（行索引）{
data.setValue（rowIndex，colIndex，$（this.attr（'fill'））；
});
chartColumn.draw（数据、{
图例：{
位置：“无”
}
});
});
图表绘制（数据、{
身高：240
});
}

div{
显示：内联块；
}

---

在柱状图中，默认情况下，同一系列中的值具有相同的颜色

系列由列定义，默认情况下具有不同的颜色，
将每个值放在单独的列中

然而，这带来了一个问题

如果按以下方式构造数据，则会丢失x轴标签
所有列只有一个标签

var data = google.visualization.arrayToDataTable([
  ['x', 'y0', 'y1', 'y2', 'y3'],
  ['Razina0', 898, 37319, 8980, 35400]
]);

如果尝试下一种方法，则列的间距将不正确
空值将有间隙

var data = google.visualization.arrayToDataTable([
  ['x', 'y0', 'y1', 'y2', 'y3'],
  ['Razina0', 898, null, null, null],
  ['Razina1', null, 37319, null, null],
  ['Razina2', null, null, 8980, null],
  ['Razina3', null, null, null, 35400],
]);

最好的选择是使用样式列
这将允许您保留当前的数据结构
并为每列提供不同的颜色

唯一的缺点是您必须提供颜色
因此，您将丢失默认颜色

---

因此，建议先绘制饼图
然后使用分配给每个切片的颜色
当饼图的

'ready'

事件触发时

请参阅以下工作片段

google.charts.load（'current'{
回调：图纸，
软件包：['corechart']
});
函数绘图图（）{
var data=google.visualization.arrayToDataTable([
['x'，'y0']，
[Razina0'，898]，
[Razina1'，37319]，
[Razina2'，8980]，
[Razina3'，35400]
]);
var chartPie=new google.visualization.PieChart（document.getElementById（'chart_pie'）；
var chartColumn=new google.visualization.ColumnChart（document.getElementById（'chart_column'））；
google.visualization.events.addListener（chartPie'ready'，function（）{
var colIndex=data.addColumn（{type:'string'，role:'style'}）；
$.each（$（'#图表_饼图路径'），函数（行索引）{
data.setValue（rowIndex，colIndex，$（this.attr（'fill'））；
});
chartColumn.draw（数据、{
图例：{
位置：“无”
}
});
});
图表绘制（数据、{
身高：240
});
}

div{
显示：内联块；
}

一般方法有点棘手；在PieChart的SVG中搜索

path

标记，获取它的

fill

属性（颜色十六进制值），并将该值设置为添加的ColumnChart列中的单元格（具有样式角色）。但是，我的饼图中有注释和图例，导致我的饼图包含4个以上的

path

标记。这破坏了我的foreach（jquery$each）循环。有没有其他方法可以达到谷歌图表的默认颜色数组？我不知道，但我认为它们来自……我不知道，但这里是图表元素的前10种默认颜色：—————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————。也许现在（直到我找到更好的解决方案）我将它们硬编码到一个数组中，并根据索引将它们应用到样式列中；在PieChart的SVG中搜索

path

标记，获取它的

fill

属性（颜色十六进制值），并将该值设置为添加的ColumnChart列中的单元格（具有样式角色）。但是，我的饼图中有注释和图例，导致我的饼图包含4个以上的

path

标记。这破坏了我的foreach（jquery$each）循环。有没有其他方法可以达到谷歌图表的默认颜色数组？我不知道，但我认为它们来自……我不知道，但这里是图表元素的前10种默认颜色：—————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————。也许现在（在我找到更好的解决方案之前）我会将它们硬编码到一个数组中，并根据index.Thanx将它们应用到样式列中，您的例子帮助了我，我创建了