Question

我想创建一个显示双y轴的谷歌图表，但两者都应该代表相同的栏。

请参阅此fiddle

  google.charts.load('current', {'packages':['bar']});
  google.charts.setOnLoadCallback(drawStuff);

  function drawStuff() {
    var data = new google.visualization.arrayToDataTable([
      ['Car', 'Distance travelled'],
      ["mercedes", 44],
      ["lamborgh", 31],
      ["porsche", 12],
      ["aston martin", 10]

    ]);

    var options = {
      title: 'Car distance',
      width: 500,
      legend: { position: 'none' },
      chart: { subtitle: 'money spent in distance travelled' },
      axes: {
        x: {
          0: { side: 'top', label: 'Car stats'} // Top x-axis.
        }
      },
      bar: { groupWidth: "20%" }
    };

    var chart = new google.charts.Bar(document.getElementById('top_x_div'));
    // Convert the Classic options to Material options.
    chart.draw(data, google.charts.Bar.convertOptions(options));
  };

我已经展示了汽车行驶距离，实际上是以公里为单位，现在我想要显示汽车在燃料上花的钱就像一辆汽车行驶1公里，它花了2美元的燃料

现在看着小提琴，假设我们有梅赛德斯汽车行驶了44公里，那么它的成本约为$88，这应该由第二个y轴描绘

怎么做？

Answer 1

图表中的每个系列（y值）代表数据中的一列

“series 0”=数据中的第1列
“系列1”=数据中的第2列

然后使用选项将每个系列映射到轴...

series: {
  0: { axis: 'distance' },
  1: { axis: 'fuel' }
},
axes: {
  y: {
    distance: {label: 'Distance'},
    fuel: {side: 'right', label: 'Fuel'}
  }
}

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

google.charts.load('current', {
  callback: drawChart,
  packages:['bar']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Car', 'Distance travelled', 'Fuel'],
    ['mercedes', 44, 88],
    ['lamborgh', 31, 62],
    ['porsche', 12, 24],
    ['aston martin', 10, 20]
  ]);

  var options = {
    title: 'Car distance',
    height: 500,
    legend: { position: 'none' },
    chart: { subtitle: 'money spent in distance travelled' },
    bar: { groupWidth: "20%" },
    series: {
      0: { axis: 'distance' },
      1: { axis: 'fuel' }
    },
    axes: {
      x: {
        0: { side: 'top', label: 'Car stats'} // Top x-axis.
      },
      y: {
        distance: {label: 'Distance'},
        fuel: {side: 'right', label: 'Fuel'}
      }
    }
  };

  var chart = new google.charts.Bar(document.getElementById('chart_div'));
  chart.draw(data, options);
};

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

编辑

删除第二个栏但保持轴需要一些操作

并使用options not available to material charts

使用核心图表查看以下工作代码段...

google.charts.load('current', {
  callback: drawChart,
  packages:['bar', 'corechart']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Car', 'Distance travelled'],
    ['mercedes', 44],
    ['lamborgh', 31],
    ['porsche', 12],
    ['aston martin', 10]
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, {
    label: 'Fuel',
    type: 'number',
    calc: function () {
      return null;
    }
  }]);


  var options = {
    title: 'Car distance',
    height: 500,
    legend: { position: 'none' },
    chart: { subtitle: 'money spent in distance travelled' },
    bar: { groupWidth: "20%" },

    // center bar with x-axis label
    isStacked: true,

    // material chart theme
    theme: 'material',

    // y-axis settings
    vAxes: {
      0: {
        ticks: [0, 10, 20, 30, 40, 50],
        title: 'Distance'
      },
      1: {
        ticks: [0, 20, 40, 60, 80, 100],
        title: 'Fuel'
      }
    },

    // map series
    series: {
      0: {
        targetAxisIndex: 0
      },
      1: {
        targetAxisIndex: 1
      }
    }
  };

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(view, options);
};

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

注意

材料图表 - ＆gt; packages:['bar'] - google.charts.Bar

核心图表 - ＆gt; packages:['corechart'] - google.visualization.ColumnChart

谷歌图表显示双轴代表相同的数据

1 个答案: