谷歌可视化将 0 轴与两个不同的 y 轴对齐

我正在创建一个组合图 https://developers.google.com/chart/interactive/docs/gallery/combochart与谷歌的可视化库。我正在绘制商店一天内的客流量和收入图表。我已将抽奖选项设置为

var options = {
  seriesType: "bars",
  series:{0:{targetAxisIndex:0},1:{targetAxisIndex:1}},
  vAxes:{0:{title: "Revenue"},1:{title: "Traffic"}},
  hAxis: {title: "Time", showTextEvery: 1},
};

它将收入设置在与​​流量不同的 Y 轴上。数据示例可能如下所示：

var data = [
  //   Time       Revenue Traffic
  ['10:00-10:30', '132.57', '33'],
  ['10:30-11:00', '249.23', '42'],
  ['11:00-11:30', '376.84', '37'],
  [... etc ..]
];

我遇到的问题是，流量值始终为正数，而如果有回报，收入可能为负数。如果发生这种情况，我的收入轴将从负值（例如 -50）开始，而流量从 0 开始，并且水平基线不对齐。我希望这样即使 Revenue 的值小于 0，它的 0 轴也会与 Traffic 0 轴对齐。

Here's an example to show what's happening. See how the Traffic 0 axis is on the same level as the Revenue's -50 axis. I would like to know how to raise the Traffic baseline to the same level as the Revenue 0 axis.

我有一个方法，我相当确定它总是会产生具有相同 0 点的轴值（我还没有证明它can't产生具有不同 0 点的轴，但我还没有遇到过）。

首先，获取两个日期系列的范围（出于我们的目的，第 1 列是“收入”，第 2 列是“流量”）：

var range1 = data.getColumnRange(1);
var range2 = data.getColumnRange(2);

对于每个系列，获取该系列的最大值，如果最大值小于或等于 0，则获取 1。这些值将用作图表的上限。

var maxValue1 = (range1.max <= 0) ? 1 : range1.max;
var maxValue2 = (range2.max <= 0) ? 1 : range2.max;

然后计算与两个上限相关的标量值：

var scalar = maxValue2 / maxValue1;

现在，通过取以下值的较低者来计算“收入”系列的下限range1.min and 0:

var minValue1 = Math.min(range1.min, 0);

然后将该下限乘以标量值即可得到“流量”系列的下限：

var minValue2 = minValue1 * scalar;

最后，设置每个轴的 vAxis minValue/maxValue 选项：

vAxes: {
    0: {
        maxValue: maxValue1,
        minValue: minValue1,
        title: 'Revenue'
    },
    1: {
        maxValue: maxValue2,
        minValue: minValue2,
        title: 'Traffic'
    }
}

最终结果是每个序列的正负比例相等（maxValue1 / (maxValue1 - minValue1 == maxValue2 / (maxValue2 - minValue2 and minValue1 / (maxValue1 - minValue1 == minValue2 / (maxValue2 - minValue2)，这意味着图表轴should最终得到相同的正负比例，将两边的 0 对齐。

这是一个 jsfiddle 的工作原理：http://jsfiddle.net/asgallant/hvJUC/ http://jsfiddle.net/asgallant/hvJUC/。只要第二个数据系列没有负值，它就应该适用于任何数据集。我正在开发一个适用于任何数据集的版本，但这应该足以满足您的用例。