响应式Google图表的最佳做法 [英] best practice for responsive Google Charts

问题描述

我在我的网站上有此 google图表。它现在是一个散点图，但我想要所有类型的图表的解决方案。
例如，如果您加载的网站具有700像素宽的窗口，则图表尺寸不响应：图表太宽。

谢谢

p>

HTML：

 < div id =chart_div> ; / div> 
  

CSS：

 code> #chart_div {
 width：100％; 
 height：20％; 
} 
  

JS：

  var options = {
 title：'职业冲浪者的体重vs.他的职业模型的体重'，
 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']，
系列：{
 1：{color：'＃06b4c8'}，
}，
 legend：{position：'top right'，textStyle：{fontSize：8}}，
 chartArea：{width： 60％'}，
 trendlines：{0：{// type：'exponential'，
 visibleInLegend：true，
 color：'gray'，
 lineWidth：2，
 opacity：0.2，
 labelInLegend：'Linear trendline \\\
（Performance）'
} 
} //为数据系列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里面的图表不适应它的大小...它保持锁定
查看图片：

解决方案

由于可视化API图表根本不响应，你必须自己处理一切。通常，这意味着监听窗口resize事件，然后重新绘制图表（根据需要设置任何尺寸）：

  resize（）{
 //必要时更改维度
 chart.draw（data，options）; 
} 
 if（window.addEventListener）{
 window.addEventListener（'resize'，resize）; 
} 
 else {
 window.attachEvent（'onresize'，resize）; 
} 
  

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.

Can you help me ?

Thanks

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

Edit: 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:

解决方案

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屋！