2

Google Visualization APIを使用して、2つの系列、売上数と売上値を持つ単純な売上チャートを使用しています。これは、2つの垂直軸を持つ縦棒グラフに表示されています。売上高は、返品などでマイナスになる可能性がありますが、これにより、グラフに2つの異なるベースラインが表示されます。販売数のゼロベースラインは、最低の販売額の数値と一致しています。サンプルデータを含むコードの例を次に示します。

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

視覚化の観点からは、提供されるデータの範囲と説明内容が大きく異なるため、2つの別々のグラフを重ねて作成する方がはるかに優れている場合があります。

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

もちろん、これには、グラフを適切に並べ、色を希望どおりに機能させるために、ある程度の調整が必要になりますが、この方法では、他の情報を保持しながら、表示したいメインデータに集中できます。参考として近くにあります。

同じグラフでそれらを実行することに固執する場合は、グリッド線がどこにあるべきかを計算できる関数を作成する必要があります（または、Googleがそれをどのように実行するかを理解しますが、Web検索では見つかりませんでした）。

グラフの最大/最小値を把握するための「簡単な」方法は、最小値と最大値の差を取り、グリッド線の数を数え（googleのデフォルトは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つのグリッド線しかないことを意味します。負の部分は正の部分よりも小さいため、正の部分がグリッド線の間隔を決定します。

これで、正の部分（0〜61000）をカバーする4つのグリッド線ができました。これは、0から61000に到達するまでの3つのセグメントがあることを意味します。

つまり、61000/3、有効数字4桁、つまり30,000に切り上げられます。

それはあなたのグリッド線を作ります：

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

偶然にも、これはあなたがあなたのチャートで得たものです。

2番目のシリーズに1つの負のグリッド線があることがわかったので、最初のシリーズを2番目のシリーズと一致するように再調整する必要があります。したがって、5つのグリッド線（上記の0と4）の代わりに、1つの負のグリッド線、1 0、そして700に到達する必要があるゼロより上の3つがあります。したがって、700の正の値を取得し、3で割って233.333にします。 。

これを最も近い100に切り上げると、300になります。

したがって、最初のチャートの最大/最小は-300に再調整され、次のグリッド線では900に再調整されます。

-300
0
300
600
900

これにより、同じベースラインが設定されます。

それはあなたの問題を解決します-あなたがする必要があるのはJavascriptにそのロジックをコード化することだけです！あなたがそれをするならば、私たちに知らせてください、私は他の誰かが将来同じ問題を抱えていると確信しています。

于 2013-01-09T06:54:53.787 に答える