Google Chart API：一个数据系列，两个垂直轴

Question

是否可以创建一个只有一个数据系列的折线图，只显示一条线，但有两个不同的垂直轴？坐标轴相差一个标量。

想一想不同时间点的收入数据系列。第一个 v 轴对应于收入水平。第二个 v 轴将显示收入占某个目标或比较数字的百分比。所以第二个 v 轴的值就是第一个 v 轴的值除以（常数）目标值。

我目前能够构建一个基于两个数据系列的图表，显示两条不同的线：一条收入线绘制在第一个 v 轴上，一条目标百分比线绘制在第二个 v 轴上轴。这些线遵循相同的路径，并且通常几乎彼此重叠。它们不直接相互叠加的原因似乎是 API 倾向于为每个轴的最大值和最小值选择“好”数字。但我认为这两条线令人困惑，很难看。这些数据可以用一行来表示。

如果不能直接做，能不能被黑？如果我必须坚持使用两个不同的数据系列，有没有办法获得第一个 v 轴的最大值，然后设置第二个 v 轴的最大值，以便两条线直接落在顶部彼此的？那我该如何清理它，让它看起来只有一行？

Answer 1

仅凭一组数据是无法实现的。让两条线对齐的简单方法是将收入水平轴的最大值设置为用于百分比的收入目标（因此它对应于 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/