Question

我正在尝试找到一种方法来显示与彩色矩形对齐的Google图表图例项目。显然，项目描述中的字符数会影响它的对齐方式。有没有人有解决方法的想法？

<html>
   <head>
      <title>Space utilisation</title>
      <script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
      </script>
      <script type = "text/javascript">
         google.charts.load('current', {packages: ['corechart']});
      </script>
   </head>
   <body>     
      <div id = "container" style = "width: 100%; height: 100%; margin: 0 auto">
      </div>
      <script language = "JavaScript">
         function drawChart() {
            // Define the chart to be drawn.
            var data = google.visualization.arrayToDataTable([
                    ['host','lvm-partition-abcde','lvm-partition-abcgf','lvm-partition-dfgdfgd','lvm-partition-fgh','lvm-partition-abc','lvm-partition-abc','lvm-partition-abc','lvm-partition-abc','lvm-partition-abc','lvm-partition-abc','lvm-partition-ab','lvm-partition-abhfhfgh','lvm-partition-abc','lvm-partition-abc','lvm-partition-abchg','lvm-partition-abfdc','lvm-partition-abdfc','lvm-partition-abfsc','lvm-partition-abc','lvm-partition-abfdsc','lvm-partition-abc','lvm-partition-abc','lvm-partition-abc','lvm-partition-abc','lvm-partition-abc','lvm-partition-abc','lvm-partition-abc','lvm-partition-abc','lvm-partition-abc','lvm-partition-abc','lvm-partition-abc','lvm-partition-abc','lvm-partition-abc','lvm-partition-abc','lvm-partition-abc','lvm-partition-abc','lvm-partition-abc','lvm-partition-abc','lvm-partition-abc','lvm-partition-abc','lvm-partition-abc','lvm-partition-abc','lvm-partition-abc','lvm-partition-abc','lvm-partition-abc','lvm-partition-abc','lvm-partition-abc','lvm-partition-abc','free'],
                    ['host1',1048576,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,904936],
                    ['host2',null,706560,691200,327680,51200,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,43120],
                    ['host3',null,null,null,null,null,409600,266240,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,123096],
                    ['host4',null,null,null,null,null,null,null,1153436,358400,102400,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,50984],
                    ['host5',null,null,null,null,null,null,null,null,null,null,286720,675840,51200,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,651460],
                    ['host6',null,null,null,null,null,null,null,null,null,null,null,null,null,614400,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,314272],
                    ['host7',null,null,null,null,null,null,null,null,null,null,null,null,null,null,614400,51200,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,263072],
                    ['host8',null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,742400,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,186272],
                    ['host9',null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,399360,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,529312],
                    ['host10',null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,645120,552960,358400,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,108736],
                    ['host11',null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,307200,481280,276480,317440,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,282816],
                    ['host12',null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,665600,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,999320],
                    ['host13',null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,460800,532500,430080,614400,512000,512000,51200,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,1986524],
                    ['host14',null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,2828700,512000,389120,102400,102400,null,null,null,null,null,null,null,null,null,null,1164884],
                    ['host15',null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,686080,665600,1309492,null,null,null,null,null,null,null,2438224],
                    ['host16',null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,348160,512000,512000,281600,1173916,256000,51200,1964628]
                    ]);

            var options = {
                            title: 'LVM PARTITION: ', 
                            isStacked:'absolute', 
                            series: {48:{color:'#888'}},
                            legend: { position: "top", maxLines: 9, alignment:'start'  },
                            hAxis: {format:'# mb'}

                };

            // Instantiate and draw the chart.
            var chart = new google.visualization.BarChart(document.getElementById('container'));
            chart.draw(data, options);
         }
         google.charts.setOnLoadCallback(drawChart);
      </script>
   </body>
</html>

enter image description here

Google图表图例项目对齐方式

0 个答案: