我试图制作一个图表,当我改变窗口大小时,它会自动调整大小.假设我从文档中获得了以下代码:https://jsfiddle.net/r3ckg7ep/1/

文档链接:https://developers.google.com/chart/interactive/docs/gallery/candlestickchart

代码:

<html>
  <head>
    <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 data = google.visualization.arrayToDataTable([
      ['Mon', 20, 28, 38, 45],
      ['Tue', 31, 38, 55, 66],
      ['Wed', 50, 55, 77, 80],
      ['Thu', 77, 77, 66, 50],
      ['Fri', 68, 66, 22, 15]
      // Treat first row as data as well.
    ], true);

    var options = {
      legend:'none'
    };

    var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));

    chart.draw(data, options);
  }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

如何实现?

非常感谢.

推荐答案

你必须重新绘制图表,任何时候都有一个调整大小...

window.addEventListener('resize', function () {
  chart.draw(data, options);
});

Javascript相关问答推荐

如何从Intl.DateTimeFormat中仅获取时区名称?

Regex结果包含额外的match/group,只带一个返回

如何在JavaScript文件中使用Json文件

如何在ASP.NET中使用Google Charts API JavaScript将条形图标签显示为绝对值而不是负值

您能在卸载程序(QtInsteller框架)上添加WizardPage吗?

创建以键值对为有效负载的Redux Reducer时,基于键的类型检测

如何使用JS创建一个明暗功能按钮?

当我try 将值更改为True时,按钮不会锁定

如何使用抽屉屏幕及其子屏幕/组件的上下文?

不协调嵌入图片

如何在Jest中模拟函数

在使用JavaScript以HTML格式显示Google Drive中的图像时遇到问题

由于http.get,*ngIf的延迟很大

打字脚本中的函数包装键入

This.forceUPDATE并通过Reaction-Router-DOM链接组件传递状态

在一次操作中使用多个addToSet不适用于多个数组

无限循环,因为变量不断被重新声明为其原始值

JavaScript原型排序函数不会与所有成员进行比较

从Java到Java的Port Inn代码验证

异步组件DidMout和forceUpdate