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/

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

1 个答案: