web-dev-qa-db-ja.com

Google Charts APIでハード最小軸値を設定する

Googleグラフを作成して、稼働時間と停止時間の割合を積み上げて表示しようとしています。ダウンタイムは通常.2未満であるため、グラフのベースラインが99.8、最大が100であることを除いて、これはうまく機能します。これにより、グラフが読みやすくなります。

これは私には十分簡単に​​思えた。私はこれがうまくいくと思った:

var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('number', 'Uptime');
data.addColumn('number', 'Downtime');
data.addRows([
  ['Dec 1, 1830',   99.875, 0.125],
  ['Dec 8, 1830',   99.675, 0.325],
  ['Dec 15, 1830',  99.975, 0.025],
  ['Dec 22, 1830',  100.0,  0.0]
]);

var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, {width: 400, height: 240, isStacked: true, vAxis: { title: "Percentage Uptime", minValue: 99.8, maxValue: 100}});

残念ながら、グラフはvAxisのminValueをまったく無視します。 APIによると、これは予想される動作のようですが、これにより疑問が残ります。私はデータを変換することさえしました-すなわち、すべての稼働時間値から99.8を減算し、0から0.2までチャートを移動させます、これは大丈夫に見えるグラフを吐き出しますが、私は適用できません99.8、99.85、99.9などと言う垂直軸のラベル-軸は、非常に忠実に、下部に0、上部に.2を示しますが、この方向を修正する方法もないようです。どちらの解決策も受け入れられるでしょう、私はこの仕事をするいくつかの方法があると確信していますか?

55
jasonpgignac

次のようにviewWindowを設定する必要があります。

var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('number', 'Uptime');
data.addColumn('number', 'Downtime');
data.addRows([
 ['Dec 1, 1830',   99.875, 0.125],
  ['Dec 8, 1830',   99.675, 0.325],
  ['Dec 15, 1830',  99.975, 0.025],
  ['Dec 22, 1830',  100.0,  0.0]

]);

var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data,
           {width: 400, 
            height: 240, 
            isStacked: true,
            vAxis: { 
              title: "Percentage Uptime", 
              viewWindowMode:'explicit',
              viewWindow:{
                max:100,
                min:99.8
              }
            }
            }                 
          );

// APIの新しいバージョン用に編集

80
Nikes

同様の問題があり、プロパティを「minValue」ではなく「min」として指定する必要がありました

vAxis: { 
    viewWindowMode:'explicit',
    viewWindow: {
        max:100,
        min:99.8
    }
}
21