Google visualization 修改Google图表中DataTable角色的外观

我有一个柱状图，我使用

确定性

角色来表示某个值是不确定的。这可视为柱的非实心填充。但是，这个外观有点太微妙了，所以我想让它更清晰一点。有没有一种方法可以连接到charts API，或者为角色指定可以修改其外观的选项？

该API不支持修改不确定列的外观。您可以进行修改，以添加对修改不确定图元外观的支持

编辑：

如果您的图表满足某些条件（即，您使用的条形图或柱形图中有1系列数据或“isStacked”选项设置为true；或SteppedArea图表；或仅显示数据点的折线图/散点图[no lines]。折线图[with lines]面积图是可以制作出来的，但要做到这一点需要付出更多的努力。其他的图表也有可能，但我还没有考虑如何使用它们）

要实现这一点，您需要为数据创建一个布尔列（它不必具有“确定性”角色，但分配角色也不会有任何影响）。然后创建DataView或设置ChartWrapper的“view”参数，为布尔值为true的值创建一系列数据，为布尔值为false的值创建一系列数据，如下所示：

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('number', 'Value');
    data.addColumn('boolean', 'Boolean');
    data.addRows([
        ['Germany', 700, true],
        ['USA', 300, true],
        ['Brazil', 400, false],
        ['Canada', 500, true],
        ['France', 600, false],
        ['Russia', 800, true]
    ]);

    var chart = new google.visualization.ChartWrapper({
        chartType: 'ColumnChart',
        containerId: 'chart_div',
        dataTable: data,
        options: {
            // setting the "isStacked" option to true fixes the spacing problem
            isStacked: true,
            height: 300,
            width: 600,
            series: {
                0: {
                    // options for Boolean = true
                    color: '#3366cc'
                },
                1: {
                    // options for Boolean = false
                    color: '#0099c6',
                    visibleInLegend: false
                }
            }
        },
        view: {
            columns: [0, {
                type: 'number',
                label: data.getColumnLabel(1),
                calc: function (dt, row) {
                    // return value if Boolean is true
                    return (dt.getValue(row, 2)) ? dt.getValue(row, 1) : null;
                }
            }, {
                type: 'number',
                label: data.getColumnLabel(1),
                calc: function (dt, row) {
                    // return value if Boolean is false
                    return (dt.getValue(row, 2)) ? null : dt.getValue(row, 1);
                }
            }]
        }
    });
    chart.draw();
}

---

参见示例：

我明白了。有没有其他方法可以将属于同一系列的柱体单独设计出来？@NilsH，我用一个你可以用来解决这个问题的方法更新了我的答案。