use*_*712 2 html javascript css charts
我试图将谷歌提供的示例图表居中:https://google-developers.appspot.com/chart/interactive/docs/quick_start
我已经使用了基本的css居中我知道(margin-right: auto;margin-left: auto;),但似乎没有任何工作.到目前为止,我一直只处理文本和图像,所以任何帮助都会非常感激.
这是我正在使用的基本代码(包括谷歌图表javascript)
<!DOCTYPE html> <html> <head> <style>
div.chart_div {
margin-left: auto;
margin-right: auto;
width: 800px; }
</style>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
// Set chart options
var options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head> <body>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
</body> </html>
Stovroz完全正确!
在CSS中,您定义div.chart_div为一个类; 但在HTML中,您定义为div#chart_divID.
以下CSS代码通常用于集中页面中的所有内容.
<style>
body{ text-align: center;}
#chart_div{width: 800px; margin: 0 auto; text-align: left;}
</style>