与谷歌图表

我可以让我的谷歌图（ScatterChart）reponsive的大小简单的问题，该API增加width: 400px和height: 200px到内部的div，像这样：与谷歌图表

<div id="chart_div" style="position: relative;"> 
    <div dir="ltr" style="position: relative; width: 400px; height: 200px;"> 
    <div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;"> 
    <svg width="400" height="200" aria-label="A chart." style="overflow: hidden;"> 
    <defs id="defs"> 
    ...

你能帮我找出原因？

而且我有完全相同的代码here但对我来说这是行不通的

这里是我的html：

<div id="chart_div"></div>

CSS：

#chart_div { 
    width:90%; 
    height:20%; 
}

JS：

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

$(window).resize(function(){ 
     drawChart(); 
    }); 
function drawChart() { 
... 
var options = { 
      title: 'Weight vs. Volume', 
      hAxis: {title: 'Weight (kg)', minValue: 53, maxValue: 100}, //55 
      vAxis: {title: 'Volume (l)'},//, minValue: 20, maxValue: 40}, //20 
      legend: 'none', 
        width: '100%', 
       height: '100%', 
       colors: ['#000000'], 
       series: { 
         1: { color: '#06b4c8' }, 
        }, 
      legend: {position: 'top right', textStyle: {fontSize: 8}}, 
      chartArea: {width: '60%'}, 
       trendlines: { 0: {//type: 'exponential', 
         visibleInLegend: true, 
         color: 'grey', 
         lineWidth: 2, 
         opacity: 0.2, 
         labelInLegend: 'Performance linear trendline' 
         } 
        } // Draw a trendline for data series 0. 
     }; 
     var chart = new google.visualization.ScatterChart(document.getElementById('chart_div')); 
     chart.draw(data, options); 
     google.visualization.events.addListener(chart, 'ready', myReadyHandler()); 

     function myReadyHandler() { 
      console.log("chartDrawn.state() before resolving:"+chartDrawn.state()); 
      console.log("...chart is drawn"); 
      chartDrawn.resolve(); 
      console.log("chartDrawn.state() after resolving:"+chartDrawn.state()); 
     } 
    }

来源

2014-06-30 Louis

看起来应该可以工作。你能否用完整的代码来更新你的帖子（或者是codepen/jsbin/jsfiddle的链接）？ – asgallant

如果y你看看Charts API documentation for ScatterCharts，你会看到width选项只有一个数字值，代表宽度（以像素为单位）。一些图表采用一个字符串值，可以使用任何您在CSS或HTML中使用的度量值（表格图表特别是这样做），但大多数似乎只采用像素值。

从我读过的 - 但没有在文档中找到 - 图表首先从传递给它的选项中获取尺寸，如果没有定义，那么它使用容器元素的像素尺寸，在它的绘制时间。因此，如果在图表准备好之前隐藏了元素，则可能会导致大小问题。此外，如果您在查看页面时调整窗口大小，它将绘制一次，而不会更新图表大小，直到再次调用draw（）。

来源

2014-06-30 20:35:11 nbering

回答

相关问题