谷歌饼图 - 中心标题 - 响应

我做了一个谷歌饼图我试图让我的标题在派的中心。谷歌饼图 - 中心标题 - 响应

我可以通过，一些CSS，但我不能让它响应，你需要重新加载页面的图表来调整，但然后标题是出？

h4.piechartheader { 
    position: absolute; 
     z-index: 100; 
     top: 268px; 
    left: 41%; 
} 


<div class="main-wrap" style="min-height:0px;"> 
<div class="piechart"> 
<h4 class="piechartheader">Your Business</h4> 
<html> 
    <head><meta http-equiv="Content-Type" content="text/html; charset=euc-jp"> 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 
     google.load("visualization", "1", {packages:["corechart"]}); 
     google.setOnLoadCallback(drawChart); 
     function drawChart() { 
     var data = google.visualization.arrayToDataTable([ 
      ['Service', 'link', 'Hours per Day'], 
      ['Marketing', '/ec/marketing.php', 1], 
      ['Accounts', '/ec/bookkeeping.php', 1], 
      ['Administration', '/ec/reception.php', 1], 
      ['Job Execution', '',1], 
      ['Job Management', '/ec/servicem8.php', 1] 
     ]); 

     var view = new google.visualization.DataView(data); 
     view.setColumns([0, 2]); 

     var options = { 
     title: 'Your Business', 
     pieSliceText: 'label', 
     legend: 'none', 
     pieHole: 0.4, 
     slices: [{color: '#CC9933'}, {color: 'black'}, {color: '#876D2D'}, {color: '#777'}, {color: '#0D72A8'}], 
     'tooltip' : {trigger: 'none'}, 
titlePosition: 'none', 
width: '100%', 
     height: '100%', 


     }; 

$(window).on("throttledresize", function (event) { 
    initChart(); 
}); 

     var chart = new google.visualization.PieChart( 
      document.getElementById('chart_div')); 
     chart.draw(view, options); 

     var selectHandler = function(e) { 
     window.location = data.getValue(chart.getSelection()[0]['row'], 1); 
     } 

     // Add our selection handler. 
     google.visualization.events.addListener(chart, 'select', selectHandler); 

     } 
    </script> 
    </head> 
    <body> 
    <div id="chart_div" style="width: 100%; height: 100%; margin:0;"></div> 
    </body> 
<style> 
body{ text-align: center;} 
#chart_div{width: 100%; margin: 0 auto;} 
</style> 
</html> 

</div><!---piechart--->

例子是http://www.vestedutility.com.au/ec/

什么想法？

来源

2016-03-28 Wrest

我努力把它添加添加了一些div的和CSS

<body style="width:100%;"> 
    <div id="chart_wrap"> 
    <div class="centro_total"><div class="alinhar_middle estilo_total"> 
     <h4 class="piechartheader">Your Business</h4> 
    </div> 
    </div> 
    <div id="chart_div"></div> 
</div> 

    </body> 


/***********Pie chart****************/ 
#chart_wrap { 
    border:1px solid gray; 
    position: relative; 
    padding-bottom: 100%; 
    height: 0; 
    overflow:hidden; 
    background:#fff; 
} 
div#chart_div { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width:100%; 
    height:100%; 
} 
.chart_wrap { 
     position: relative; 
     padding-bottom: 100%; 
    } 
.centro_total { 
    position: absolute; 
    left: 25%; 
    top: 25%; 
    width: 50%; 
    height: 50%; 
    vertical-align: middle; 
    text-align: center; 
    z-index: 0; 
} 



.alinhar_middle { 
    position: relative; 
    top: 50%; 
    -moz-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    -o-transform: translateY(-50%); 
    /* etc */ 
    -webkit-transform: translateY(-50%); 
    transform: translateY(-50%); 
} 

h4.piechartheader { 
    font-size: 1em; 
} 
<!----Finish Pie chart--->

来源

2016-03-28 19:18:30 Wrest

谷歌饼图 - 中心标题 - 响应

回答

相关问题