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

Question

我有一个柱形图，我使用certainty角色来指示一个值是不确定的。这可视化为列的非实心填充。不过，这个样子有点太微妙了，所以我想让它更清晰一点。有没有办法连接到图表 API，或者为角色指定选项，可以修改它的外观？

Answer 1

API 不支持修改不确定列的外观。您可以提出功能请求以添加对修改不确定元素外观的支持。

编辑：

如果您的图表符合某些条件（即，您使用的是带有 1 系列数据或“isStacked”选项设置为 true 的条形图或柱形图；或 SteppedArea 图表；或显示数据的 LineChart/ScatterChart仅点[没有线]。可以使 LineCharts [带线] 和 AreaCharts 工作，但要实现它需要付出更多的努力。其他图表可能是可能的，但我没有想过如何使其工作跟他们）。

为了完成这项工作，您可以为数据创建一个布尔列（它不必具有“确定性”角色，但分配该角色也不会造成任何损害）。然后，您创建一个 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();
}

参见示例：http: //jsfiddle.net/asgallant/Xzbw5/