是否有可能用谷歌图表创建两个侧面条形图？

Posted 2021-04-09

我想绘制一个两侧都有条形图的条形图。

是否可以使用Google Chart创建这样的图表？

答案

你可以近距离接触 - 使用一个带有标准选项的图表......

诀窍是将Female的值设置为负值

然后使用对象表示法{}将值格式化为正数

v: = value，f: =格式化值

{v: -94, f: '94'}

对轴标签做同样的事......

var options = {
  hAxis: {
    ticks: [
      {v: -150, f: '150.00'},
      {v: -100, f: '100.00'},
      {v: -50, f: '50.00'},
      {v: 0, f: '0.00'},
      {v: 50, f: '50.00'},
      {v: 100, f: '100.00'},
      {v: 150, f: '150.00'}
    ]
  }
};

请参阅以下工作代码段...

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

function drawChart() {
  var data = new google.visualization.DataTable({
    cols: [
      {label: 'x', type: 'string'},
      {label: 'Male', type: 'number'},
      {label: 'Female', type: 'number'}
    ],
    rows: [
      {c:[{v: 'A'}, {v: 95}, {v: -94, f: '94'}]},
      {c:[{v: 'B'}, {v: 92}, {v: -93, f: '93'}]},
      {c:[{v: 'C'}, {v: 85}, {v: -80, f: '80'}]},
      {c:[{v: 'D'}, {v: 70}, {v: -87, f: '87'}]}
    ]
  });

  var options = {
    hAxis: {
      ticks: [
        {v: -150, f: '150.00'},
        {v: -100, f: '100.00'},
        {v: -50, f: '50.00'},
        {v: 0, f: '0.00'},
        {v: 50, f: '50.00'},
        {v: 100, f: '100.00'},
        {v: 150, f: '150.00'}
      ]
    }
  };

  var chart = new google.visualization.BarChart(document.getElementById('chart-container'));
  chart.draw(data, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart-container"></div>

另一答案

@ WhiteHat的两个图表解决方案非常聪明。当我尝试它时，另一个团队成员看着它，并问我为什么不使用堆积条形图。我试了一下，然后看到它奏效了。所以这是另一种实现方式。上面第一个解决方案的唯一变化是stacked: true。

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

function drawChart() {
  var data = new google.visualization.DataTable({
    cols: [
      {label: 'x', type: 'string'},
      {label: 'Male', type: 'number'},
      {label: 'Female', type: 'number'}
    ],
    rows: [
      {c:[{v: 'A'}, {v: 95}, {v: -94, f: '94'}]},
      {c:[{v: 'B'}, {v: 92}, {v: -93, f: '93'}]},
      {c:[{v: 'C'}, {v: 85}, {v: -80, f: '80'}]},
      {c:[{v: 'D'}, {v: 70}, {v: -87, f: '87'}]}
    ]
  });

  var options = {
    hAxis: {
      ticks: [
        {v: -150, f: '150.00'},
        {v: -100, f: '100.00'},
        {v: -50, f: '50.00'},
        {v: 0, f: '0.00'},
        {v: 50, f: '50.00'},
        {v: 100, f: '100.00'},
        {v: 150, f: '150.00'}
      ]
    },
    isStacked: true
  };

  var chart = new google.visualization.BarChart(document.getElementById('chart-container'));
  chart.draw(data, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart-container"></div>

以上是关于是否有可能用谷歌图表创建两个侧面条形图？的主要内容，如果未能解决你的问题，请参考以下文章

在谷歌列图表中显示条形图上的类型名称

更改静态谷歌图表 [条形图] 背景颜色

从两个不同的图表创建组合的单个条形图或直方图，并在第 1 年和第 2 年中并排显示条形图

在引导轮播中加载多个谷歌图表

Google图表（可视化）中堆积条形图中的第三个条形图无效

图表中的条件颜色变化