Javascript Chart Draw

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

问题是，虽然，我写了形象化的馅饼/条形图/线形图等一个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>

代码不显示在图表。有谁知道我做错了什么？在此先感谢。

来源

2013-03-20 a.ymous

我也在使用“$ data_for_chart;”它使用PHP连接到数据库来检索数据。 – 2013-03-20 13:28:46

您正在加载错误的资料包。

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

来源

2013-03-21 00:23:38 jmac

对不起，对于迟到的答案，但是，这对我有效。谢谢。 – 2013-04-17 19:35:47

没问题，很高兴我能帮上忙。 – jmac 2013-04-18 01:31:31

Javascript Chart Draw

回答

相关问题