2

在此处输入图像描述

我可以绘制一个并排样式的柱形图和一个堆叠图（都在 x 轴上方），但不是这个。如何使x轴下方的值仍然为正？

4

1 回答 1

1

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

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

这是它的样子：

堆积图

于 2012-12-13T18:15:43.383 回答