Javascript google可视化将0轴与两个不同的y轴对齐

我正在用谷歌的可视化库创建一个。我正在绘制一家商店一天的流量和收入图表。我已将绘图选项设置为

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开始，水平基线不对齐。我希望这样，即使收入值小于0，它的0轴也将与流量0轴对齐

这里有一个例子来说明发生了什么。查看流量0轴如何与收入-50轴处于同一级别。我想知道如何将流量基线提高到与收入0轴相同的水平。

---

我有一种方法，我可以合理地确定它始终会生成具有相同0点的轴值（我没有证明它不能生成具有不同0点的轴，但我没有遇到任何方法）

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

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

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

现在，通过取

range1.min

和

0

中的较低值来计算“收入”系列的下限：

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

然后将该下界乘以标量值，得到“流量”系列的下界：

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

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

最终结果是每个系列的正比例和负比例相等（

maxValue1/（maxValue1-minValue1==maxValue2/（maxValue2-minValue2

和

minValue1/（maxValue1-minValue1==minValue2/（maxValue2-minValue2

），这意味着图表轴应以相同的正比例和负比例结束，在两侧对齐0

---

这里有一个JSFIDLE，它可以用于任何数据集，只要第二个数据系列没有负值。我正在开发一个可以用于任何数据集的版本，但这应该足以满足您的用例。

虽然不完全相同，但这里有一个函数可以为最大/最小值获取精确的整数，该函数可以处理s的否定：

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

var minValue2 = minValue1 * scalar;

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