使用谷歌图表

Question

  

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">


  google.load('visualization', '1.0', {'packages':['corechart']});

  google.setOnLoadCallback(drawChart);

  function drawChart(){

    var options = {
                   'width':400,
                   is3D:true ,
                   'height':300};

    var name = "emp_name";
    $.ajax({
        url : "data.json",
        dataType : "JSON"
    }).done(function(data)
            {
                var nameArray = [["state",name]];
                $.each(data.Details,function(){
                    var stateitem = [this.emp_name,this[name]];
                    nameArray.push(stateitem);
                });

            var statesData = google.visualization.arrayToDataTable(statesArray);

            var chart = new google.visualization.PieChart(document.getElementById('chart_id'));
            chart.draw(statesData, options);
        });
  }
</script>

<div id="chart_id"></div>

 

我是谷歌可视化概念的新手，我想要一个饼图，显示每个员工的总工作时间，从阅读json数据文件，如下所示。

{＆＃34;详情＆＃34 ;:     [         {＆＃34; emp_name＆＃34;：＆＃34; ABC＆＃34;，＆＃34; works_on＆＃34;：＆＃34; wheels＆＃34;，＆＃34; time_from＆＃34;：＆＃34; 2012-03-27 10：00：00＆＃34;，＆＃34; time_to＆＃34;：＆＃34; 2012-03-27 12：00：00＆＃34; }，         {＆＃34; emp_name＆＃34;：＆＃34; xyz＆＃34;，＆＃34; works_on＆＃34;：＆＃34; seat＆＃34;，＆＃34; time_from＆＃34;：＆＃34; 2012-03-27 14：00：00＆＃34;，＆＃34; time_to＆＃34;：＆＃34; 2012-03-27 17：00：00＆＃34; }，         {＆＃34; emp_name＆＃34;：＆＃34; ABC＆＃34;，＆＃34; works_on＆＃34;：＆＃34;绘画＆＃34;，＆＃34; time_from＆＃34;：＆＃34; 2012-03-28 10：00：00＆＃34;，＆＃34; time_to＆＃34;：＆＃34; 2012-03-28 12：00：00＆＃34; }，         {＆＃34; emp_name＆＃34;：＆＃34; xyz＆＃34;，＆＃34; works_on＆＃34;：＆＃34; tube＆＃34;，＆＃34; time_from＆＃34;：＆＃34; 2012-03-28 14：00：00＆＃34;，＆＃34; time_to＆＃34;：＆＃34; 2012-03-28 17：00：00＆＃34; }，         {＆＃34; emp_name＆＃34;：＆＃34; pqr＆＃34;，＆＃34; works_on＆＃34;：＆＃34; engine＆＃34;，＆＃34; time_from＆＃34;：＆＃34; 2012-03-29 10：00：00＆＃34;，＆＃34; time_to＆＃34;：＆＃34; 2012-03-29 12：00：00＆＃34; }，         {＆＃34; emp_name＆＃34;：＆＃34; ABC＆＃34;，＆＃34; works_on＆＃34;：＆＃34; wiper＆＃34;，＆＃34; time_from＆＃34;：＆＃34; 2012-03-29 14：00：00＆＃34;，＆＃34; time_to＆＃34;：＆＃34; 2012-03-29 17：00：00＆＃34; }，         {＆＃34; emp_name＆＃34;：＆＃34; mno＆＃34;，＆＃34; works_on＆＃34;：＆＃34; air_cooler＆＃34;，＆＃34; time_from＆＃34;：＆＃34; 2012-03-30 10：00：00＆＃34;，＆＃34; time_to＆＃34;：＆＃34; 2012-03-30 12：00：00＆＃34; }，         {＆＃34; emp_name＆＃34;：＆＃34; ABC＆＃34;，＆＃34; works_on＆＃34;：＆＃34; wheels＆＃34;，＆＃34; time_from＆＃34;：＆＃34; 2012-03-30 14：00：00＆＃34;，＆＃34; time_to＆＃34;：＆＃34; 2012-03-30 17：00：00＆＃34; }  ]}