javascript - Google Chart API : One data series, 两个垂直轴

Question

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

考虑不同时间点的一系列收入数据。第一个 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/