0

役割を使用しcertaintyて値が不確実であることを示す縦棒グラフがあります。これは、柱の塗り潰しとして視覚化されます。ただ、この見た目はちょっと微妙すぎるので、もう少しスッキリさせたいです。チャート API にフックしたり、役割のオプションを指定したりして、外観を変更する方法はありますか?

4

1 に答える 1

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/

于 2013-09-03T12:58:56.547 に答える