时间戳

首页 > 解决方案 > 如何使javascript图表在HTML div中响应

javascript - 如何使javascript图表在HTML div中响应

问题描述

我很难尝试在我的 html 页面中使 google 图表 javascript 图表响应 - 尝试更改屏幕大小时它似乎工作的唯一方法是刷新页面。我正在尝试这样做，因此当您单击并拖动窗口时，外观会根据屏幕大小而相应变化。但无济于事！也许有人以前遇到过这个问题，或者它对图表不起作用？谢谢！

https://codepen.io/limtu/pen/QWyLGEX

      <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
      <script type="text/javascript">
       google.charts.load('current', {'packages':['corechart']});
       google.charts.setOnLoadCallback(drawChart);



       function drawChart() {
       var queryString = encodeURIComponent('SELECT A, B');

       var query = new google.visualization.Query(
      'https://docs.google.com/spreadsheets/d/1dXP9yGEzNlmRxuSwCr2kyMM9CcS5hloIxKvef0RSa10/gviz/tq? 
       gid=0&headers=1&tq=' + queryString);
       query.send(handleQueryResponse);

       };
       function handleQueryResponse(response) {
       if (response.isError()) {
       alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
        };

        var data = response.getDataTable();


        var high = ((data.getColumnRange(1).max)); 
        var low = (data.getColumnRange(1).min);
        var dif = high-low;
        var trail_percent = 0.1;
        var trail = (trail_percent*dif);
        var min_trail = 1
        var min_y = 0;
        trail = Math.max.apply(null, [trail,min_trail]);
        var max_price = high + trail;
        var min_price = low - trail;
        min_price = Math.max.apply(null, [min_price, min_y]);











        var options = {
        title: '1D',
        areaOpacity: 0.5,
        focusTarget: 'category',
         animation: {startup: true, duration: 100,easing: 'in'},
         crosshair: {trigger: 'both', orientation: 'vertical', opacity: 1, color : 'fcb247' },
         tooltip:{trigger:'both'},
         series: {0:{color: '#0173a3', visibleInLegend: false}},
         legend: {position: 'none'},


         hAxis: {title: '', 
         format: 'HH:00',
         gridlines:{count : 4, color:'FFFFFF'}},

         vAxis: {minValue: min_price, maxValue: max_price,
         gridlines:{count : 4},minorGridlines:{interval:0}}
         };
         var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
         chart.draw(data, options);
         }
         </script>
         </head>
         <body>
         <div id="chart_div" style="width: 100%; height: 500px;"></div>
         </body>

标签： javascripthtmlcssresponsive

解决方案

你应该使用vmforwidth和vhforheight

可以看到这个页面 

 <div id="chart_div" style="width: 100vw; height: 100vh;"></div> 
//for width and height 100%;

 <div id="chart_div" style="width: 50vw; height: 50vh;"></div> 
//for width and height 50%;

推荐阅读