javascript - Google Graphs Y 轴的一个值(两个图表的堆叠列)

Question

完整代码

您可以使用 jsfiddle太测试了。

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

function drawStuff() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Topping');
    data.addColumn('number', 'Nescafe Instant');
    data.addColumn('number', 'Folgers Instant');
    data.addColumn('number', 'Nescafe Beans');
    data.addColumn('number', 'Folgers Beans');
    data.addRows([
        ['2001', 500, 1200, 816, 200],
        ['2002', 163, 231, 539, 594],
        ['2003', 125, 819, 200, 578],
        ['2004', 197, 536, 613, 500]
    ]);

    // Set chart options
    var options = {
        isStacked: true,
        width: 800,
        height: 600,
        chart: {
            title: 'Year-by-year coffee consumption',
            subtitle: 'This data is not real'
        },

        series: {
            2: {
                targetAxisIndex: 1
            },
            3: {
                targetAxisIndex: 1
            }
        }
    };

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.charts.Bar(document.getElementById('chart_div'));
    chart.draw(data, google.charts.Bar.convertOptions(options));
};

输出

问题

我使用 Google Visualization 生成上面的图表。

如果您看到上面的屏幕截图，您可以看到上面图表的 Y 轴在左侧和右侧有两个值。似乎会发生这种情况，因为图表对左侧栏和右侧栏使用了两个日期范围。

我想删除右侧 Y 轴或为左右 Y 轴打印相同的值。我的意思是所有数据都应该在左侧的 Y 轴下。我该怎么做才能做到这一点？

Answer 1

series.n.targetAxisIndex 的选项创建第二个轴
删除这些选项将允许所有系列默认为第一个轴

但是，在 Material 条形图中，将系列移动到不同的轴，
将系列分成多个堆栈，产生蓝色和红色条
删除上面提到的选项会将所有系列组合成一个蓝色堆栈

为了保持堆栈以两种颜色分开，
series.n.targetAxisIndex 必须使用，会显示双轴

要保持两个轴同步，使用选项 --> vAxis.viewWindow
这将为两个轴设置相同的范围'

vAxis: {
  viewWindow: {
    min: 0,
    max: 1800
  }
}

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

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

function drawStuff() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Topping');
  data.addColumn('number', 'Nescafe Instant');
  data.addColumn('number', 'Folgers Instant');
  data.addColumn('number', 'Nescafe Beans');
  data.addColumn('number', 'Folgers Beans');
  data.addRows([
    ['2001', 500, 1200, 816, 200],
    ['2002', 163, 231, 539, 594],
    ['2003', 125, 819, 200, 578],
    ['2004', 197, 536, 613, 500]
  ]);

  var options = {
    isStacked: true,
    width: 800,
    height: 600,
    chart: {
      title: 'Year-by-year coffee consumption',
      subtitle: 'This data is not real'
    },
    series: {
      2: {
        targetAxisIndex: 1
      },
      3: {
        targetAxisIndex: 1
      }
    },
    vAxis: {
      viewWindow: {
        min: 0,
        max: 1800
      }
    }
  };

  var chart = new google.charts.Bar(document.getElementById('chart_div'));
  chart.draw(data, google.charts.Bar.convertOptions(options));
}

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

注意 jsapi 不应再用于加载图表库，
根据发行说明...

The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. The last update, for security purposes, was with a pre-release of v45. Please use the new gstatic loader.js from now on.

这只会改变 load 语句，见上面的片段......