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的选项创建第二轴
删除这些选项将允许所有系列默认为第一个轴

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

为了保持堆叠分为两种颜色，
必须使用series.n.targetAxisIndex和双轴＆＃39;将显示

保持两个轴＆＃39;同步，使用选项 - ＆gt; vAxis.viewWindow
这将为两个轴设置相同的范围。

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

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

＆＃13;

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));
}

＆＃13;

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

＆＃13;

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

通过jsapi加载程序保留的Google图表版本不再一致更新。出于安全考虑，最后一次更新是预先发布的v45。请从现在开始使用新的gstatic loader.js。

这只会更改load语句，请参阅上面的代码段...

Google Graphs Y轴的一个值（两个图表的堆积列）

1 个答案: