2017-03-17 87 views
0

我正在研究一个项目,我想要在加载google地图时禁用或修改缩放因子(默认缩放)。但我无法做到。当活动开始时,它显示以下;在加载Google图表时禁用缩放因子

enter image description here

码是:

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

示例:我想要适合300 * 300尺寸的完整图表。

回答

0

图表将填充容器

看到下面的工作段的宽度......

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>

+0

你在容器上设置一个宽度是多少?或者如果宽度改变,图表将需要重新绘制... – WhiteHat

+0

宽度恒定。 (300 * 300)。 – Humty

+0

在容器可见之前绘制图表吗? – WhiteHat