Top left borders appearing round Bar Chart in IE7 using Google Visualization API
I am having some problems with IE and googles Visualization Api. Basically an extra border (single pixel white line) is been added to the top and the left of the my chart, but only in IE. A full border is also been applied to a any labels in the graph which are truncated (cut off off slightly).
A screenshot can be seen here: http://www.screencast.com/users/Second2/folders/Jing/media/2de9ad36-efce-40ab-b3d0-a14e00460b49
HINT (the top and left white lines should not be there, and the border around the label "Expe..."
The Page Code:
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Sales');
data.addColumn('number', 'Expenses');
data.addRows(4);
data.setValue(0, 0, '2004');
data.setValue(0, 1, 1000);
data.setValue(0, 2, 400);
data.setValue(1, 0, '2005');
data.setValue(1, 1, 1170);
data.setValue(1, 2, 460);
data.setValue(2, 0, '2006');
data.setValue(2, 1, 660);
data.setValue(2, 2, 1120);
data.setValue(3, 0, '2007');
data.setValue(3, 1, 1030);
data.setValue(3, 2, 540);
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, {width: 400, height: 240, title: 'Company Performance', backgroundColor: '#CCCCCC',
vAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
});
}
</script>
<style type="text/css">
iframe {
border: none;
}
</style>
</head>
<body style="background-color: #CCCCCC;">
<div id="chart_div"></div>
</body>
</html>
enter code here
Any one got any 开发者_开发百科ideas what might be causing these extra white lines?
Cheers in advance for any help anyone can provide!
Looks like a known bug - check out: http://code.google.com/p/google-visualization-api-issues/issues/detail?id=235
加载中,请稍侯......
精彩评论