我使用谷歌可视化API的有两个系列，销量和销售价值数一个简单的销售图表，那我显示有两个vetical轴的柱形图上。 销售值可以为负，如退货，但是这是造成该图显示两个不同的基线。 零基线销售的数量与销量最低值图线。 下面是一些示例数据的代码的一个例子：
google.load('visualization', '1.0', { 'packages': ['corechart'] });
google.setOnLoadCallback(drawSalesChart);
function drawSalesChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string', 'Order Source');
dataTable.addColumn('number', 'Num Sales');
dataTable.addColumn('number', 'Sales Value');
dataTable.addRows([
['Web (Order)', 300, 31000],
['Call Centre (Order)', 700, 61000],
['Call Centre (Return)', 50, -4100],
['Call Centre (Exchange)', 10, 800]
]);
var options = {
title: 'Sales by Order Source',
hAxis: { title: 'Order Source' },
series: {
0: { targetAxisIndex: 0 },
1: { targetAxisIndex: 1 },
},
vAxes: {
0: { title: 'Num Sales' },
1: { title: 'Sales Value' }
}
};
new google.visualization.ColumnChart(
document.getElementById('livesales-chart-container')).draw(dataTable, options);
}
我经历过的API文档，因为是在设置基准信息，但似乎并没有被扳平每个vAxis的零到同一点的方式。 我试着搜索谷歌和StackOverflow的和有类似的问题，但我看不到任何人有这个问题。
我如何，甚至我可以，显示为零，两个系列的单基线？
从可视化的角度来看，它可能是好了很多，以创建彼此顶部两个独立的图表，因为提供的数据是在范围和它是什么解释截然不同。
<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Visualization API Sample
</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
function drawSalesChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string', 'Order Source');
dataTable.addColumn('number', 'Num Sales');
dataTable.addColumn('number', 'Sales Value');
dataTable.addRows([
['Web (Order)', 300, 31000],
['Call Centre (Order)', 700, 61000],
['Call Centre (Return)', 50, -4100],
['Call Centre (Exchange)', 10, 800]
]);
var dataView1 = new google.visualization.DataView(dataTable);
dataView1.setColumns([0,1]);
var dataView2 = new google.visualization.DataView(dataTable);
dataView2.setColumns([0,2]);
var options1 = {
title: 'Sales by Order Source',
hAxis: { title: 'Order Source' },
vAxis: { title: 'Num Sales' }
};
var options2 = {
title: null,
hAxis: { title: null, textPosition: 'none' },
vAxis: { title: 'Sales Value' }
};
new google.visualization.ColumnChart(
document.getElementById('chart1')).draw(dataView1, options1);
new google.visualization.ColumnChart(
document.getElementById('chart2')).draw(dataView2, options2);
}
google.setOnLoadCallback(drawSalesChart);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="chart1" style="width: 600px; height: 300px;"></div>
<div id="chart2" style="width: 600px; height: 100px;"></div>
</body>
</html>
当然，这将需要一些prettying行动使图形正确排队，并且使色彩的工作，只要你愿意，但这样一来，你可以专注于你想要显示的主数据，同时保持其他信息附近作为参考。
如果你是在做他们在同一个图形坚持，你需要写一个函数能够计算在网格线应处于（或找出谷歌是怎么做的，但我无法找到它的网络搜索）。
为了找出最大/最小值应该在图什么，“简单”的方法是取最小值和最大值之间的差异，计算的网格线数量，您将有（默认为谷歌为5），轮到你的最大数的最接近的显著位，并用这些作为你的网格线分隔。
例如，以你的第一列：300，700，50，10
Max Value: 700
Min Value: 10
Exponent: LEN(Max)-1 = 2 = 10^2, nearest 100
Grid Lines: 5 - 1 = 4 (assuming you want the bottom value to serve as the floor at the same rounding, you need 4 more iterations to go over the top value)
Difference Between Max and Min: 690
Required Interval: 690 / 4 = 172.5
Rounded up to the nearest 100: 200
Min Value: FLOOR(Min,200) = 0
Max Value: CEILING(Max,200) = 800
Grid Line 1: 0
Grid Line 2: 200
Grid Line 3: 400
Grid Line 4: 600
Grid Line 5: 800
请注意，这符合你的图表显示。 但是，它不会为负值，因为数学变得更复杂一点的工作。
首先，你需要为负值的比例计算出在最小值和最大值的总差。
例如，鉴于你的第2列数据：31000，61000，-4100，800
Min Value: -4100
Max Value: 61000
Difference: 65100
Negative Ratio: 6.3%
所以，你的范围的6.3％是否定的部分。 给予5条网格线，这意味着，一个网格线将需要低于0，并且您只有用于正极部4条网格线。 由于负部分比所述正面部分变小，正部分将确定网格线间隔。
所以，现在你有4条网格线以覆盖所述正部分（0 - 61000），这意味着必须从0 3段达到61000。
这意味着三分之六万一，向上舍入到4个显著数字，或30,000。
这使得你的网格线：
-30,000
0
30,000
60,000
90,000
巧合的是，这是你在图表中得到。
现在，你知道的第二个系列具有1个负的网格线，你就必须要调整你的第一个系列，以配合第二个。 因此，而不是具有5个网格线（0和4的上方），你现在有1个负网格线，1 0，然后3以上零需要达到700，从而用三带你具有700正值，分频，对于233.333 。
一轮到最近的100，你会得到300。
所以，你的第一个图表最大值/最小值将被重新调整到-300和900以下的网格线：
-300
0
300
600
900
这将设置相同的基线。
这将解决您的问题 - 所有你需要做的是代码中的Javascript逻辑！ 让我们知道，如果你做到这一点，我相信其他人也会有同样的问题下了线。
