1

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

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

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

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

4

1 回答 1

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 回答