javascript - Google Chart Tools を使用して「年齢性別」スタイルの縦棒グラフを描画するにはどうすればよいですか?

Question

横に並べたスタイルの縦棒グラフと積み上げグラフ (すべて x 軸の上) を描画できますが、これは描画できません。x軸の下の値をまだ正にする方法は?

Answer 1

縦棒グラフを使用する場合は、プロパティを true に設定し、isStacked1 つの性別の値 (この例では女性) に -1 を掛けると、探しているバーが得られます。次に、負の記号を非表示にするために vAxis 形式を変更する必要があります。Google チャートにはいくつかの制限があり、この要求を 100% 達成するのが難しくなります。最大の問題は、Google Charts がICU パターン セットの一部しかサポートしていないことです。、つまり、パーセント修飾子を正の値と負の値の両方に追加することはできません。これに対処するために、技術的に正しい 1.0 の分数ではなく、パーセント値に 100 を掛けました。また、指摘したように、ツールチップには負の値が表示されます。これに対処するには、正の値である女性のデータムのフォーマットされた値を指定する必要があります (その場合は % を含めることができます。これは単なる文字列であり、グラフ化された値ではないためです)。

Google Code Playgroundでこれを試してください:

function drawVisualization() {
  /* Create and populate the data table. */
  var data = {
    "cols":[
      {"id":"Age","label":"Age","type":"string"},
      {"id":"Female","label":"Female","type":"number"},
      {"id":"Male","label":"Male","type":"number"}
    ],"rows":[
      {
        "c":[
          {"v":13,"f":"13-17"},
          {"v":-11,"f":"11%"},
          {"v":2,"f":"2%"}]
      },
      {
        "c":[
          {"v":18,"f":"18-24"},
          {"v":-8,"f":"8%"},
          {"v":5,"f":"5%"}]
      },
      {
        "c":[
          {"v":25,"f":"25-34"},
          {"v":-6,"f":"6%"},
          {"v":8,"f":"8%"}]
      },
      {
        "c":[
          {"v":35,"f":"35-44"},
          {"v":-6,"f":"6%"},
          {"v":10,"f":"10%"}]
      },
      {
        "c":[
          {"v":45,"f":"45-54"},
          {"v":-8,"f":"8%"},
          {"v":12,"f":"12%"}]
      },
      {
        "c":[
          {"v":55,"f":"55-64"},
          {"v":-3,"f":"3%"},
          {"v":7,"f":"7%"}]
      },
      {
        "c":[
          {"v":64,"f":"64+"},
          {"v":-1,"f":"1%"},
          {"v":2,"f":"2%"}]
      }
    ]
  };

  /* Create and draw the visualization. */
  new google.visualization.ColumnChart(document.getElementById('visualization'))
    .draw(new google.visualization.DataTable(data), {
      title:"Coffee Consumption by age",
      isStacked: true,
      vAxis: {
        format: "##;##"
      },
      width:600, height:400,
      hAxis: {
        title: "Age"
      }
    }
  );
}

これは次のようになります。