谷歌图表API:一个数据系列，两个垂直轴

Google Chart API: One data series, two vertical axes

本文关键字：系列 两个 垂直 数据 一个 谷歌 API      更新时间：2023-09-26

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

想象一下不同时间点的收入数据序列。第一个v轴对应的是收入水平。第二个v轴将显示收入占某个目标或比较数字的百分比。因此，第二个v轴的值只是第一个值除以（恒定）目标值。

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

如果不能直接做，它能被黑客入侵吗？如果我必须坚持使用两个不同的数据序列，有没有一种方法可以获得第一个v轴的最大值，然后设置第二个v轴，使两条线直接重叠？那么我该如何清理它，让它看起来只有一行？

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

相关文章：