Question

我可以让我的谷歌图表（ScatterChart）代表，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());
        }
    }

Answer 1

如果查看Charts API documentation for ScatterCharts，您会看到width选项仅采用数字值，表示宽度（以像素为单位）。一些图表采用字符串值，可以使用您在css或html中使用的任何测量值（特别是表格图表），但大多数似乎只采用像素值。

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

谷歌图表大小的简单问题

1 个答案: