javascript - 是否可以使用谷歌图表创建两侧条形图？

Question

我想绘制一个有两侧的条形图，就像这样。

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

Answer 1

您可以得到关闭 - 使用带有标准选项的一张图表...

技巧是将女性的值设置为负

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

v: = 值，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>

<小时/>

绘制两个图表，进行更多的操作，会让你更接近

请参阅以下工作片段...

google.charts.load('current', {
  callback: function () {
    // chart data
    var data = new google.visualization.DataTable({
      cols: [
        {label: 'x', type: 'string'},
        {label: 'Male', type: 'number', p: {seriesColor: '#2196f3'}},
        {label: 'Female', type: 'number', p: {seriesColor: '#f44336'}}
      ],
      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}]}
      ]
    });

    // draw female first
    drawChart(2);
    drawChart(1);

    function drawChart(colIndex) {
      // build hAxis labels
      var formatNumber = new google.visualization.NumberFormat({
        pattern: '#,##0.00'
      });
      var colRange = data.getColumnRange(colIndex);
      var ticks = [];
      for (var i = 0; i <= 150; i = i + 50) {
        var tick = (colRange.max < 0) ? -i : i;
        ticks.push({
          v: tick,
          f: formatNumber.formatValue(Math.abs(tick))
        });
      }

      // build hAxis view window (ensure 150.00 tick has room)
      var edgeValue = (colRange.max < 0) ? -175 : 175;
      var viewWindow = {};

      // hide inner vAxis labels, build hAxis view window
      var vAxis = {
        textStyle: {}
      };
      if (colRange.max >= 0) {
        vAxis.textStyle.auraColor = data.getColumnProperty(colIndex, 'seriesColor');
        vAxis.textStyle.color = data.getColumnProperty(colIndex, 'seriesColor');
        viewWindow.max = edgeValue;
      } else {
        viewWindow.min = edgeValue;
      }

      // chart options
      var options = {
        colors: [data.getColumnProperty(colIndex, 'seriesColor')],
        hAxis: {
          textStyle: {
            color: data.getColumnProperty(colIndex, 'seriesColor'),
            bold: true
          },
          ticks: ticks,
          viewWindow: viewWindow
        },
        legend: {
          position: 'none'
        },
        theme: 'maximized',
        vAxis: vAxis
      };

      // choose series to display
      var view = new google.visualization.DataView(data);
      view.setColumns([0, colIndex]);

      // create chart
      var container = document.getElementById('chart-container').appendChild(document.createElement('div'));
      container.className = 'chart';
      var chart = new google.visualization.BarChart(container);

      // add series label
      google.visualization.events.addListener(chart, 'ready', function () {
        var chartTitle = null;
        Array.prototype.forEach.call(container.getElementsByTagName('text'), function(axisLabel) {
          if ((axisLabel.getAttribute('aria-hidden') !== 'true') &&
              (axisLabel.innerHTML === '100.00') &&
              (axisLabel.getAttribute('text-anchor') === 'end') &&
              (axisLabel.getAttribute('fill') === data.getColumnProperty(colIndex, 'seriesColor')) &&
              (chartTitle === null)) {
            chartTitle = axisLabel.cloneNode(true);
            chartTitle.setAttribute('y', parseFloat(chartTitle.getAttribute('y')) - 38);
            chartTitle.innerHTML = data.getColumnLabel(colIndex);
            axisLabel.parentNode.appendChild(chartTitle);
          }
        });
      });

      // draw chart
      chart.draw(view, options);
    }
  },
  packages: ['corechart']
});

#chart-container {
  white-space: nowrap;
}
.chart {
  display: inline-block;
}

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