谷歌图表堆叠柱状图.如何设置每个单独堆叠项目(数据系列）的样式

Google chart stacked column chart. How to style each individual stacked item (data series)

本文关键字：单独堆 系列 样式 数据 项目 谷歌 何设置 设置      更新时间：2023-09-26

我已经构建了一个谷歌图表堆叠柱状图。我能够对每个堆叠的项目进行注释。当涉及到每个列项目的样式时，只有最后堆叠的项目会受到影响。

最后一个堆叠项目的工作代码：

// Create the data table.
var data = google.visualization.arrayToDataTable([
    ['Genre', '', "Label", { role: 'annotation', role:'style' } ],
    ['column1', 5, 11, 31,  'opacity: 0.2'],
    ['column2', 5, 12, 32,  'opacity: 0.2'],
    ['column3', 5, 13, 33,  'opacity: 0.2'],
    ['column4', 5, 14, 34,  'opacity: 0.2'],
    ['column5', 5, 15, 35,  'opacity: 0.2'],
    ['column6', 5, 26, 36,  'opacity: 0.2']
]);

我玩了很多代码，但总是收到一个错误。我想为每个数据行（堆叠列）中的每个数据系列应用样式。

设置所有图表的样式，如上一个图表。

var data = google.visualization.arrayToDataTable([
    ['Genre', 'Label1', { role: 'annotation', role:'style' }, 'Label2', { role: 'annotation', role:'style' }, 'Label3', { role: 'annotation', role:'style' } ],
    ['column1', 5,  'opacity: 0.2', 11,  'opacity: 0.2', 31,  'opacity: 0.2'],
    ['column2', 5,  'opacity: 0.2', 12,  'opacity: 0.2', 32,  'opacity: 0.2'],
    ['column3', 5,  'opacity: 0.2', 13,  'opacity: 0.2', 33,  'opacity: 0.2'],
    ['column4', 5,  'opacity: 0.2', 14,  'opacity: 0.2', 34,  'opacity: 0.2'],
    ['column5', 5,  'opacity: 0.2', 15,  'opacity: 0.2', 35,  'opacity: 0.2'],
    ['column6', 5,  'opacity: 0.2', 26,  'opacity: 0.2', 36,  'opacity: 0.2']
]);

jsfiddle

PS：您忘记了标签数组中的一个索引

相关文章：