javascript - 如何用Google Chart Tools绘制 "age-gender"风格的柱状图？

Question

我可以绘制并排样式的柱形图和堆叠图(都在 x 轴上方)，但这个不行。如何让x轴下方的值仍然为正数？

Answer 1

如果您使用 Column chart , 将 isStacked 属性设置为 true 并将一个性别的值(在您的示例中为女性)乘以 -1 这将为您提供您正在寻找的酒吧。接下来您需要更改 vAxis 格式以隐藏负号。 Google Charts 有一些限制，这将使 100% 的请求更难实现。最大的一个是Google Charts只支持ICU pattern set的一部分。 ，这意味着您不能将百分比修饰符同时添加到正值和负值。为了解决这个问题，我将百分比值乘以 100 而不是 1.0 的分数，这在技术上是正确的。另外，正如您所指出的，工具提示显示负值。要解决这个问题，您需要为 Female 数据提供一个正值的格式化值(也许您可以在这种情况下包括 %，因为它只是一个字符串，而不是图表值)。

在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"
      }
    }
  );
}

这是它的样子: