4

Google Charts API を使用したいのですが、(少なくとも公には) サポートしていないようです。

これは私が再現したいものです (内部レポート用):スクリーンショット

編集: これは私が見つけた最も近いものです: https://developers.google.com/chart/interactive/docs/reference#barformatter

4

1 に答える 1

2

まったく同じことを行う簡単な方法はありませんが、少しごまかすと、次のような結果が得られます (さらに微調整するために必要に応じてカスタマイズできます)。

サンプル

基本的に、6 つの異なるシリーズで積み上げ棒グラフを作成します。

  1. ダミー（透明）シリーズ
  2. 黒線 (エラーバーが適切に表示されるように)
  3. (および 4、5、6) 範囲のグレー、赤、黄、緑

Dummy シリーズは透明で、最初のバーがチャートのどこまで表示されるかを設定します。黒い線シリーズは常に 0 で、0 から 100 までのエラー バーがあります (以下の間隔列)。その他はデータを表します。

これを手動で行うのは少し複雑ですが、javascript 関数を作成して、単一の値が与えられたさまざまな系列に数値を適切に分配することができます。任意の値を入れただけです。

色と透明度を最適化し、各バーの「高さ」を同じように見せることができます。軸のベース ラインとグリッド ラインは、見栄えを良くするために非表示にすることができます。凡例は非表示にすることもできます。とにかくコードをいじるだろうと思って、私はそれらをしませんでした。

コードは次のとおりです。

function drawVisualization() {
  // Create and populate the data table.
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Label');
  data.addColumn('number', 'Dummy');
  data.addColumn('number', 'Black for Lines');
  data.addColumn({type: 'number', role: 'interval'});
  data.addColumn({type: 'number', role: 'interval'});
  data.addColumn('number', 'Grey');
  data.addColumn('number', 'Red');
  data.addColumn('number', 'Yellow');
  data.addColumn('number', 'Green');
  data.addRows([
    ['Target', 65, 0, 0, 100, 15, 00, 00, 00],
    ['Test A', 85, 0, 0, 100, 00, 00, 00, 15],
    ['Test B', 70, 0, 0, 100, 10, 00, 05, 00],
    ['Test C', 10, 0, 0, 100, 00, 15, 00, 00],
  ]);

  // Create and draw the visualization.
  new google.visualization.BarChart(document.getElementById('visualization')).
      draw(data,
           {isStacked: true,           
            width:600, height:400,
            series: [{color: 'transparent'}, {color: 'black'}, {color: 'grey'}, {color: 'red'}, {color: 'yellow'}, {color: 'green'}]
           }
      );
}
于 2013-05-21T04:23:36.100 に答える