Question

我有一个柱形图，我使用certainty角色来指示值是不确定的。这可视化为列的非实心填充。然而，这种外观有点过于微妙，所以我想让它更清晰一些。有没有办法挂钩图表API，或指定角色的选项，可以修改它的外观？

Answer 1

API不支持修改不确定列的外观。您可以使feature request添加对修改不确定元素外观的支持。

编辑：

如果您的图表符合某些条件（即，您使用的是Bar或ColumnChart，其中包含1系列数据或“isStacked”选项设置为true;或者SteppedArea图表;或者LineChart /，则可以解决此问题ScatterChart仅显示数据点[无行]。可以使用LineCharts [with lines]和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/

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

1 个答案: