1

データ系列を 1 つだけ使用して折れ線グラフを作成し、線を 1 つだけ表示して縦軸を 2 つにすることはできますか? 軸はスカラーだけ異なります。

さまざまな時点での収入のデータ系列を考えてみてください。最初の v 軸は収入レベルに対応します。2 番目の v 軸は、その収入が目標または比較数値の何パーセントであるかを示します。したがって、2 番目の v 軸の値は、最初の値を (一定の) ターゲット値で割ったものです。

現在、2 つのデータ シリーズに基づいて 2 つの異なる線を示すグラフを作成できます。最初の v 軸に対してプロットされた収入線と、2 番目の v 軸に対してプロットされた目標に対する割合の線です。これらの線は同じパスをたどり、通常はほぼ重なり合っています。それらが互いに直接重なり合っていない理由は、API が各軸の最大値と最小値に対して「適切な」数値を選択する傾向があるようです。しかし、この 2 つの行は紛らわしく、見にくいと思います。このデータは 1 行で表すことができます。

直接できない場合は、ハッキングできますか? 2 つの異なるデータ シリーズに固執する必要がある場合、最初の v 軸の最大値を取得してから、2 番目の v 軸の最大値を設定して、2 つの線が直接上に来るようにする方法はありますかお互いの？では、1行しかないように見えるようにするにはどうすればよいでしょうか?

4

1 に答える 1

2

一連のデータだけでそれを実現する方法はありません。2 つの線を揃える簡単な方法は、収入レベル軸の最大値をパーセンテージに使用される収入目標として設定し (したがって、100% に対応する)、最小値を最小パーセンテージに等しく設定することです。表示したい収入レベル (一般的には 0% が最も簡単です)。このようなもの：

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'Year');
    data.addColumn('number', 'Income');

    data.addRows([
        [2000, 35000],
        [2001, 38000],
        [2002, 42000],
        [2003, 44000],
        [2004, 47000],
        [2005, 51000],
        [2006, 55000],
        [2007, 60000],
        [2008, 61000],
        [2009, 65000],
        [2010, 59000],
        [2011, 62000],
        [2012, 63000]
    ]);

    var targetIncome = 80000;
    var minIncomePercent = 0;
    var view = new google.visualization.DataView(data);
    view.setColumns([0, {
        type: 'number',
        label: 'Percent of Target',
        calc: function (dt, row) {
            return dt.getValue(row, 1) / targetIncome;
        }
    }, 1]);
    var chart = new google.visualization.LineChart(document.querySelector('#chart_div'));
    chart.draw(view, {
        height: 400,
        width: 600,
        hAxis: {
            format: '####'
        },
        vAxes: {
            0: {
                title: 'Income Level',
                format: '$#,###',
                minValue: targetIncome * minIncomePercent,
                maxValue: targetIncome
            },
            1: {
                title: 'Income Percentage of Target',
                format: '#%',
                minValue: minIncomePercent,
                maxValue: 1
            }
        },
        series: {
            0: {
                targetAxisIndex: 1,
                enableInteractivity: false,
                pointSize: 0,
                lineWidth: 0,
                visibleInLegend: false
            },
            1: {
                targetAxisIndex: 0
            }
        }
    });
}

http://jsfiddle.net/asgallant/6N5mZ/を参照してください

于 2013-08-22T04:21:25.317 に答える