Question

我使用堆叠列谷歌图表，但每列图表的注释或标签重叠，如下图所示：

我的代码如下：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>
<div id="chart_divgraph" style="width: 750px; height:500px;"></div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script language="javascript">
    google.charts.load('current', {'packages':['corechart']});              
    google.charts.setOnLoadCallback(drawVisualization32);               
    function drawVisualization32() {                
    // Some raw data (not necessarily accurate)             
    /*var jsonData = $.ajax({               
    url: "getndata.php?cntnew=Ghatwar",             
    dataType: "json",               
    async: false                
    }).responseText;*/              
    // Create our data table out of JSON data loaded from server.               
    var data = new google.visualization.DataTable({"cols":[{"id":"","label":"Caste Section","pattern":"","type":"string"},{"id":"","label":"Private","pattern":"","type":"number"},{"id":"","label":"Community","pattern":"","type":"number"},{"id":"","label":"Open Defecation","pattern":"","type":"number"}],"rows":[{"c":[{"v":"SC","f":null},{"v":"0","f":null},{"v":"1","f":null},{"v":"47","f":null}]},{"c":[{"v":"ST","f":null},{"v":"3","f":null},{"v":"7","f":null},{"v":"51","f":null}]},{"c":[{"v":"OBC","f":null},{"v":"5","f":null},{"v":"6","f":null},{"v":"84","f":null}]},{"c":[{"v":"GEN","f":null},{"v":"17","f":null},{"v":"1","f":null},{"v":"26","f":null}]}],"p":null});     
    var view = new google.visualization.DataView(data);
      view.setColumns([0, 1,
                       { calc: getpercentage,
                         sourceColumn: 1,
                         type: "string",
                         role: "annotation" },
                       2,
                       { calc: getpercentagesecond,
                         sourceColumn: 2,
                         type: "string",
                         role: "annotation" },
                       3,
                       { calc: getpercentagethird,
                         sourceColumn: 3,
                         type: "string",
                         role: "annotation" }])
      function getpercentage(data, rowNum){
               var firstval = data.getValue(rowNum, 1)
               var secondval = data.getValue(rowNum, 2)  
               var thirdval = data.getValue(rowNum, 3)  
               var datavalueplus = parseInt(firstval)  + parseInt(secondval) + parseInt(thirdval);
               var finalpercentage = Math.abs( (firstval/datavalueplus)*100 ) ;
              var  numb = finalpercentage.toFixed(2);
  return (numb + "%");
}
function getpercentagesecond(data, rowNum){
               var firstval = data.getValue(rowNum, 1)
               var secondval = data.getValue(rowNum, 2)  
               var thirdval = data.getValue(rowNum, 3)  
               var datavalueplus = parseInt(firstval)  + parseInt(secondval) + parseInt(thirdval);
               var finalpercentage = Math.abs( (secondval/datavalueplus)*100 ) ;
              var  numb = finalpercentage.toFixed(2);
  return (numb + "%");
}
function getpercentagethird(data, rowNum){
               var firstval = data.getValue(rowNum, 1)
               var secondval = data.getValue(rowNum, 2)  
                var thirdval = data.getValue(rowNum, 3)  
               var datavalueplus = parseInt(firstval)  + parseInt(secondval) + parseInt(thirdval);
               var finalpercentage = Math.abs( (thirdval/datavalueplus)*100 ) ;
              var  numb = finalpercentage.toFixed(2);
  return (numb + "%");
}

    var options = {             
    title : 'Use of toilets across different prevailing caste section in village',                  
    seriesType: 'bars', 
      /* width: 600,
        height: 400,*/
    /* bar: { groupWidth: 20 },     */  
    vAxis: {
        /*minValue: 0,*/
  /*      scaleType: 'mirrorLog',*/
  viewWindowMode:'pretty',

  },
    isStacked:"percent"                 
    };              
    var chart = new google.visualization.ComboChart(document.getElementById('chart_divgraph'));             
    chart.draw(view, options);              
    }

    </script>
</body>
</html>

我在stackoverflow上尝试了各种解决方案，但没有得到结果。请问有人可以帮我吗？提前致谢

堆叠列Google图表重叠标签内的列

0 个答案: