Question

我在项目中使用谷歌图表，但我很难让他们做出响应。

我在响应式图表上看到了其他示例，但我似乎无法在我的案例中使用它。我的所有图表都会被渲染，之后它们的大小不会改变。

如果有人可以使这个图表响应id欣赏它。谢谢你：

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Year');
    data.addColumn('number', 'Revenue');
    data.addColumn('number', 'Average Revenue');
    data.addRows([
      ['2004', 1000, 630],
      ['2005', 1170, 630],
      ['2006', 660, 630],
      ['2007', 1030, 630]
    ]);

    var options = {
      title: 'Revenue by Year',
      seriesType: "bars",
      series: {1: {type: "line"}},  
      vAxis: {title: 'Year',
              titleTextStyle:{color: 'red'}},
        colors:['red','black']
    };

    var chart = new google.visualization.ComboChart(document.getElementById('chart'));
    chart.draw(data, options);
}

google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);

图表小提琴： Fiddle

如果它可能占用父母的百分比宽度，那就太棒了

Answer 1

由于我还没有发表评论，我必须提交这个作为答案，尽管事实上我并不认为这是一个值得回答的问题。

只要调整窗口大小以获得所需的行为，就需要调用drawChart（）函数。 Google＆＃34;快速响应的Google图表＆＃34;）并查看first link。它描述了如何使用JQuery完成此任务：

$(window).resize(function(){
  drawChart();
});

仅使用Javascript，this answer on Stack Exchange by Sohnee描述了如何在调整大小事件时触发函数：

window.onresize = doALoadOfStuff;

function doALoadOfStuff() {
    //do a load of stuff
}

所有这些都归功于上述链接的作者。

Answer 2

在您的选项块中添加width_units：

var options = {
    width: 80,
    width_units: '%'
}

使谷歌图表响应

2 个答案: