2

我正在使用 Google Charts API 集成到一个小组项目中。该项目是社交媒体趋势等的可视化工具包。

问题是，我已经编写了一个 PHP 程序来可视化饼图/条形图/折线图等。但我只能通过声明来让它们工作：

var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);

可视化各个图表。但是我希望为可视化创建单独的文件。即drawPie、drawLine、drawBar 等。这样它就可以使用我们创建的基于规则的数据类型工具，即可以将百分比和位置绘制到饼图上。

无论如何，我对每个单独的文件都有问题。下面是 drawPie.js 文件的代码：

<html>
<head>
    <!-- Load JSAPI -->
    <script type="text/javascript" src='https://www.google.com/jsapi?autoload={"modules":[{"name":"visualization","version":"1","packages":["corechart","table"]}]}'></script>

    <script type="text/javascript">
    //<!-- Load the API Package -->
    google.load('visualization', '1.0', {'packages':['controls']});
    //<!-- Callback when the Google Visualization API is Loaded -->
    google.setOnLoadCallback(drawDashboard);

    function drawPie() {

    //<!-- Create the Table -->
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'location');
    data.addColumn('number', 'crimes');
    data.addRows([ <?php echo $data_for_chart; ?> ]);
    //<!-- Pass Options -->
    var options = {
    'legend': 'left',
    'title': 'Crimes (per day)',
    'is3D': 'True',
    'width':700,
    'height':300
    };

    //<!-- Instantiate and Draw Chart -->
    var chart = new google.visualization.PieChart(document.getElementById('pie_chart'));
    chart.draw(data, options);
    </script>
</head>
    <body>
        <style> pie_chart {margin: 0 auto; }</style>
        <div id="pie_chart"></div>

        <style>
            #left { margin-left: 15%; float: left; }
            #right { margin-right: 15%; float: right; }
            img { width: 200; height: 200;}
        </style>
    </body>

代码不显示图表。有谁知道我做错了什么？提前致谢。

4

1 回答 1

1

您正在加载错误的包。

更改google.load('visualization', '1.0', {'packages':['controls']});为google.load('visualization', '1.0', {'packages':['corechart']});它应该可以工作。如果没有，那么除了这个（相对简单的）问题之外，您还有另一个问题。

于 2013-03-21T00:23:38.920 回答