Question

我制作了一个谷歌饼图，我试图让我的标题在馅饼的中心。

我可以通过一些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/

任何想法？

Answer 1

我在工作时添加了一些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--->

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

1 个答案: