垂直对齐的谷歌可视化仪表

Google visualization gauge in vertical alignment

本文关键字：可视化 仪表 谷歌 对齐 垂直      更新时间：2023-09-26

我想把谷歌仪表放在垂直对齐。这是我的javascript代码（它是从谷歌游乐场复制粘贴的）

<script type='text/javascript'>
      google.load('visualization', '1', {packages:['gauge']});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Memory', 80],
          ['CPU', 55],
          ['Network', 68]
        ]);
        var options = {
          width: 400, height: 120,
          redFrom: 90, redTo: 100,
          yellowFrom:75, yellowTo: 90,
          minorTicks: 5
        };
        var chart = new google.visualization.Gauge(document.getElementById('menu2'));
        chart.draw(data, options);
      }
    </script>

这是我的 htmldiv

<div id="menu2"></div>

和 CSS

#menu2
{
background-color:#FFD700;
height:570px;
width:150px;
float:right;
}

知道吗？

我刚刚将内联样式添加到div 中将加载的仪表。Ans 从我的谷歌脚本中删除了所有宽度高度选项。

这是小提琴：http://jsfiddle.net/NB3Eg/

你可以在这里玩它的html和css https://code.google.com/apis/ajax/playground/?type=visualization#gauge

相关文章：