javascript - 如何在网页中定位 Google 图表?

标签 javascript html google-visualization

我正在使用 Google 图表。定位让我望而却步。我没有在文档中找到那部分。我只想在 div 中创建一个 Google 图表,左上角位于 div 中的 (x, y) 中。帮助控制尺寸的加分。

<html>
  <head>
    <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([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

        var options = {
          title: 'Company Performance',
          hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

如果我使用像 Firebug 这样的工具查看“运行时”中的 html,我会看到:

rect x="161" y="96" width="579" height="309"

但我没有选择任何这些值。

最佳答案

例如,要将图表定位在 DIV 中的 (0,0) 处,请添加图表选项:

var options = {
          ...,
          chartArea:{left:0,top:0,width:"50%",height:"50%"}
}

并根据需要调整宽度和高度;完整的选项是 here .

关于javascript - 如何在网页中定位 Google 图表?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12253866/

相关文章:

javascript - 无法更改 VueJs 插件的 .Css 文件

javascript - 输入类型编号仅允许 2 个数字

html - Web Speech API - iOS 中的语音识别

javascript - 如何删除表格中每个 td 标签的第一个字符,然后使用 Google Chart API 和 Javascript 显示它

javascript 无法获取未定义或空引用的属性 'value'

javascript - 有没有类似reset.css的reset.js?

html - HTML div 上的不同 CSS 行为

javascript - 如何仅使用一个图像标签来显示多张图像?

javascript - Google Chart API - 饼图 legend.textStyle 颜色

r - 无法从打印的html文件中查看gvisMotionChart