Google visualization 具有双y轴谷歌图表的多条基线
我使用谷歌可视化API制作了一个简单的销售图表，它有两个系列，销售数量和销售价值，我用两个垂直轴在柱状图上显示。销售值可以是负数，例如退货，但这会导致图表显示两个不同的基线。销售数量的零基线与最低销售价值数字一致。下面是一个代码示例，其中包含一些示例数据：Google visualization 具有双y轴谷歌图表的多条基线,google-visualization,Google Visualization,我使用谷歌可视化API制作了一个简单的销售图表，它有两个系列，销售数量和销售价值，我用两个垂直轴在柱状图上显示。销售值可以是负数，例如退货，但这会导致图表显示两个不同的基线。销售数量的零基线与最低销售价值数字一致。下面是一个代码示例，其中包含一些示例数据： google.load('visualization', '1.0', { 'packages': ['corechart'] }); google.setOnLoadCallback(drawSalesChart); function d
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);
}
我如何，甚至如何，为两个系列显示一个零基线？从可视化的角度来看，最好在彼此的顶部创建两个单独的图表，因为提供的数据在范围和解释方面都非常不同
<!--
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>
Min Value: -4100
Max Value: 61000
Difference: 65100
Negative Ratio: 6.3%
-30,000
0
30,000
60,000
90,000
-300
0
300
600
900
-30,000
0
30,000
60,000
90,000
-300
0
300
600
900
这将解决您的问题——您所需要做的就是将逻辑编码到Javascript中！如果您这样做了，请告诉我们，我相信其他人也会遇到同样的问题。哇，感谢您深思熟虑的详细回复。现在，我想我将使用第一个解决方案，将数字分成两个图，因为我只添加了顺序值，以获得更全面的图像；这不是必须具备的条件。如果我将你的解决方案构建成JavaScript，我肯定会在这里发帖。在Excel中，排列图形非常容易。由于坐标轴标签宽度与Google Visualizations的不同，这并不容易做到，因此虽然这两个图形可以工作，但如果数字的数量经常变化，要让它们看起来漂亮可能有点棘手。祝你好运！您可能还希望在底部图形中创建2个系列，并将其堆叠起来，以便负数以红色显示以使其更明显。我在中包含javascript以查找给定最小值和最大值的轴的建议最大/最小值