在加载时间设置Google图表宽度 [英] Setting Google Charts width on load time

问题描述

我的网站上有这个 Google图表.现在是散点图，但是我想为所有类型的图表提供解决方案. 例如，如果使用700像素宽的窗口加载网站，则图表尺寸将无法响应:图表太宽. 下面是我正在使用的代码.

I have this google chart on a my website. It's a Scatter chart for now, but I would like the solution for all types of charts. If you load the site with a 700-px-wide window for example, the chart dimensions are not responsive: the chart is too wide. Below is the code I am using.

HTML:

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

CSS:

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

JS:

var options = {
        title: 'Weight of pro surfer vs. Volume of his pro model',
        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: 'Linear trendline\n(Performance)'
                    } 
                }    // 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() {
        chartDrawn.resolve();       }

似乎div #chart_div具有正确的大小(我用CSS设置的大小)，但是此div中的图表无法适应其大小...它保持锁定状态 见图片:

It seems that the div #chart_div has the right size (the one that I set with css), but the chart inside this div doesn't adapt its size...it stays locked with See the image:

推荐答案

由于Visualization API图表根本没有响应，因此您必须自己处理所有事情.通常，这意味着监听窗口调整大小"事件，然后重新绘制图表(适当设置任何尺寸):

Since the Visualization API charts are not responsive at all, you have to handle everything on your own. Typically, this means listening for the window "resize" event and redrawing your chart then (setting any dimensions as appropriate):

function resize () {
    // change dimensions if necessary
    chart.draw(data, options);
}
if (window.addEventListener) {
    window.addEventListener('resize', resize);
}
else {
    window.attachEvent('onresize', resize);
}

这篇关于在加载时间设置Google图表宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！