简体   繁体   English

在加载Google图表时禁用缩放系数

[英]Disable the zoom factor on loading the Google Chart

I am working on a project in which I want to disable or modify the zoom factor (Default zoom) on loading the google map. 我正在一个项目中,我想在加载Google地图时禁用或修改缩放系数(默认缩放)。 But I am unable to do it. 但是我做不到。 When the activity starts it show following; 活动开始时,将显示以下内容;

在此处输入图片说明

Code is; 代码是;

<html>
<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
      google.charts.load('current', {
  callback: function () {
    drawChart();
    window.addEventListener('resize', drawChart, false);
  },
  packages:['corechart']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Sales', 'Expenses', 'Profit'],
    ['2014', 1000, 400, 200],
    ['2015', 1170, 460, 250],
    ['2016', 660, 1120, 300],
    ['2017', 1030, 540, 350]
  ]);

  var options = {
    animation:{
      duration: 1000,
      easing: 'linear',
      startup: true
    },
    height: 600,
    theme: 'material',
    title: 'Company Performance'
  };

  var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_material'));
  chart.draw(data, options);
}
    </script>
</head>
<body>
<div id="columnchart_material" style="width: 900px; height: 500px;"></div>
</body>
</html>

Example: I want to fit the complete Chart in 300*300 dimensions. 示例:我想将整个图表适合300 * 300尺寸。

the chart will fill the width of the container 图表将填充容器的宽度

see following working snippet... 请参阅以下工作片段...

 google.charts.load('current', { callback: function () { drawChart(); window.addEventListener('resize', drawChart, false); }, packages:['corechart'] }); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Year', 'Sales', 'Expenses', 'Profit'], ['2014', 1000, 400, 200], ['2015', 1170, 460, 250], ['2016', 660, 1120, 300], ['2017', 1030, 540, 350] ]); var options = { animation:{ duration: 1000, easing: 'linear', startup: true }, height: 600, theme: 'material', title: 'Company Performance' }; var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_material')); chart.draw(data, options); } 
 #columnchart_material{ width: 300px; } 
 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="columnchart_material"></div> 

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM