3

2 つの y 軸を使用している Google コンビネーション チャートがあります。

現在、各軸のベースラインは異なるレベルにあります。

各軸のベースラインが同じレベルであることを確認したいと考えています。

グラフを表示するために現在使用しているコードを以下に示します。

<html>
<head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script>

    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart);
    function drawChart() {

    var data = new google.visualization.DataTable();

        data.addColumn('number', 'Sales');
        data.addColumn('number', 'Total PnL');
        data.addColumn('number', 'Total Margin');

        data.addRows([  [6.5,150.6,0.6604],
                        [7.0,-275,-1],
                        [7.5,-128.45000,-0.30368],
                        [8.0,345.5,0.63904761],
                        [8.5,-316.56000,-0.07868],
                        [9.0,-118.26000,-0.09587],
                        [9.5,-899.0699,-0.236790],
                        [10.0,-242.6800,-0.40805],
                        [10.5,28.1700,0.00786]  ]);                    

        var options = {
            title: 'Graph 1',
            tooltip: {textStyle: {fontSize:14}},
            titleTextStyle:{fontSize:12},
            hAxis: {title: 'time', titleTextStyle: {color: 'red',fontSize:15}, textStyle: {fontSize:11,fontStyle:'bold'}},
            legend: {maxLines:5,textStyle: {fontSize: 11.5}},
            seriesType: "bars",
            series: {
                    0: {type: "bar",targetAxisIndex:0,color:'#000000'},
                    1: {type: "line",targetAxisIndex:1,color:'#333333'},
                    }, 
            vAxes:{
                0:{title:'PnL',titleTextStyle: {fontSize:14},textStyle:{color: 'blue',fontSize:15},format:'£###,###,###'},
                1:{title:'Margin',titleTextStyle: {fontSize:14},textStyle:{color: 'red',fontSize:15},format:'#.###%'}
                }
        };      

      var chart = new google.visualization.ComboChart(document.getElementById('graphdiv'));
      chart.draw(data, options);
    }

    </script>
</head>
<body>
    <div id='graphdiv' style='width: 900px; height: 500px;'></div>
</body>
</html>

この質問に関連する、stackoverflow に関する次の 2 つの質問を認識しています。

  1. デュアル y 軸 Google チャートによる複数のベースライン
  2. Google ビジュアライゼーションは、0 軸を 2 つの異なる y 軸に揃えます

これらの最初のものは、データが事前に知られている状況を具体的に扱っているように思えます。また、それを実装するために必要な JavaScript のいくつかの兆候を確認することも役に立ちます。

2 番目は便利な JavaScript を提供しますが、私のデータセットのように、2 番目の系列に負の値が含まれるデータ系列を処理できないようです。

これらの両方の回答の最も重要な要素は、各 vAx の minValue プロパティと maxValue プロパティを利用することです。これらを変更すると、Google Charts が通常各軸のベースラインを決定する方法をオーバーライドすることができます (通常、これは、個々の軸のデータ自体の最小値と最大値を純粋に調べることによって行われます)。

4

1 に答える 1

2

@asgallant のご厚意により、Google ビジュアライゼーション API ディスカッション グループで上記の質問に対する回答を見つけました。ここを参照してください。

以下の回答を再現しました。

ベースラインが常にグラフの中央にあることが許容される場合 (その下にデータ ポイントがない場合でも)、この問題には簡単な解決策があります。各シリーズの最小値/最大値を取得し、minValue/maxValue オプションを設定します。反対の値の負の値: これにより、チャートが軸の範囲を決定するために使用する実際の最小/最大が 0 を中心に対称になり、両方の軸がチャートの中心でベースラインを共有するようになります。

var axis0Range = data.getColumnRange(1);

var axis1Range = data.getColumnRange(2);

vAxes オプションで:

vAxes:{

0:{
    title:'PnL',
    titleTextStyle: {fontSize:14},
    textStyle:{color: 'blue',fontSize:15},
    format:'£###,###,###',
    // swap the min/max and multiply by -1
    minValue: axis0Range.max * -1,
    maxValue: axis0Range.min * -1
},
1:{
    title:'Margin',
    titleTextStyle: {fontSize:14},
    textStyle:{color: 'red',fontSize:15},
    format:'#.###%',
    // swap the min/max and multiply by -1
    minValue: axis1Range.max * -1,
    maxValue: axis1Range.min * -1
 }
}
于 2015-02-12T20:42:18.950 に答える