2

我将 Google Visualization API 用于一个简单的销售图表，该图表有两个系列，即销售数量和销售价值，我在带有两个垂直轴的柱形图上显示。销售价值可以是负数，例如退货，但这会导致图表显示两个不同的基线。销售数量的零基线与最低销售价值数字一致。这是带有一些示例数据的代码示例：

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 的零与同一点联系起来。我试过搜索 Google 和 StackOverflow，也有类似的问题，但我看不到有人遇到过这个问题。

我怎样才能，甚至怎样才能为两个系列显示一个零基线？

4

1 回答 1

0

从可视化的角度来看，创建两个单独的图表可能会更好，因为提供的数据在范围和解释的内容上都非常不同。

<!--
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>

当然，这需要一些修饰以使图形正确排列，并使颜色按您的意愿工作，但这样您就可以专注于您想要显示的主要数据，同时保留其他信息附近作为参考。

如果您坚持在同一张图上执行它们，您将需要编写一个函数来计算网格线的位置（或者弄清楚谷歌是如何做到的，但我在网络搜索中找不到它）。

要弄清楚图表上的最大值/最小值应该是多少，一种“简单”的方法是取最小值和最大值之间的差，计算您将拥有的网格线数（谷歌的默认值为 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 条网格线，这意味着 1 条网格线需要低于 0，而正数部分只有 4 条网格线。由于负部分小于正部分，正部分将决定网格线间距。

所以现在你有 4 条网格线来覆盖正部分 (0 - 61000)，这意味着你有 3 个从 0 到 61000 的线段。

这意味着 61000 / 3，四舍五入到 4 位有效数字，即 30,000。

这使您的网格线：

-30,000
0
30,000
60,000
90,000

巧合的是，这就是你在图表中得到的。

现在您知道第二个系列有 1 个负网格线，您必须重新调整您的第一个系列以匹配第二个系列。因此，您现在没有 5 条网格线（上面的 0 和 4 条），而是有 1 条负网格线，1 0，然后 3 高于零，需要达到 700。因此，您将 700 正值除以 3，得到 233.333 .

将其四舍五入到最接近的 100，得到 300。

因此，您的第一个图表最大/最小值将重新调整为 -300，以下网格线为 900：

-300
0
300
600
900

这将设置相同的基线。

这将解决您的问题——您需要做的就是将该逻辑编码到 Javascript 中！如果您这样做，请告诉我们，我相信其他人也会遇到同样的问题。

于 2013-01-09T06:54:53.787 回答