谷歌图表中的双 Y 轴在双 y 轴上具有自定义步骤答案

【问题标题】：Dual Y-Axis in Google Charts With Custom step on both dual y axis谷歌图表中的双 Y 轴在双 y 轴上具有自定义步骤
【发布时间】：2016-08-22 12:39:46
【问题描述】：

我在每个轴上都面临 amcharts 双 y 轴自定义步骤的问题，因此转向 Google Charts。 Google Charts 是否支持具有最小值和最大值的双 y 轴以及每个轴上的自定义步长？

附上图片供参考：

【问题讨论】：

标签： asp.net charts google-visualization

【解决方案1】：

要设置双 y 轴，请更改 series 之一的 targetAxisIndex...

  series: {
    1: {
      targetAxisIndex: 1
    }
  },

要设置最小值和最大值，请使用viewWindow
对于步骤，必须提供自己的ticks
对于每个vAxes

  vAxes: {
    0: {
      viewWindow: {
        min: 0,
        max: 20
      },
      ticks: [0, 5, 10, 15, 20]
    },
    1: {
      viewWindow: {
        min: 120,
        max: 240
      },
      ticks: [120, 160, 200, 240]
    }
  }

请参阅以下工作 sn-p...

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['Label', 'Series 0', 'Series 1'],
      ['a', 10, 150],
      ['b', 12, 180],
      ['c', 14, 210],
      ['d', 16, 240]
    ]);

    var container = document.getElementById('chart_div');
    var chart = new google.visualization.ColumnChart(container);

    chart.draw(data, {
      series: {
        1: {
          targetAxisIndex: 1
        }
      },
      vAxes: {
        0: {
          viewWindow: {
            min: 0,
            max: 20
          },
          ticks: [0, 5, 10, 15, 20]
        },
        1: {
          viewWindow: {
            min: 120,
            max: 240
          },
          ticks: [120, 160, 200, 240]
        }
      }
    });
  },
  packages: ['corechart']
});

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

【讨论】：