2017-03-04 111 views
1

我查看了所有文档,找不到具体的文档在哪里传递哪些类型的数据以传递到饼图以显示哪些百分比片段当考虑到整个饼图是100%时,仍然需要完成工作量。如何设置使用Google图表完成的工作量的百分比

可以说我们有以下任务。 1.数据库 2.前端 3.网页设计

数据库是45%完成 前端35%完成 网页设计是60%完成。

我能够将百分比和小数传递给数据表,但是当它们传递1,3和2等数字时,我迷路了。

目标是让投资者看到在饼图中剩余的工作量,我应该如何使用小数或百分比来做到这一点?

我可能没有正确地问,因为如果从100%开始工作的剩余工作量不起作用。

基于大约10个片段,我可以向投资者展示它,这些片段组成了100%的工作要做,我应该传递给这种类型的饼图?

<html> 
    <head> 
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
    <script type="text/javascript"> 
     google.charts.load("current", {packages:["corechart"]}); 
     google.charts.setOnLoadCallback(drawChart); 
     function drawChart() { 
     var data = google.visualization.arrayToDataTable([ 
      ['Language', 'Speakers (in millions)'], 
      ['Assamese', 13], ['Bengali', 83], ['Bodo', 1.4], 
      ['Dogri', 2.3], ['Gujarati', 46], ['Hindi', 300], 
      ['Kannada', 38], ['Kashmiri', 5.5], ['Konkani', 5], 
      ['Maithili', 20], ['Malayalam', 33], ['Manipuri', 1.5], 
      ['Marathi', 72], ['Nepali', 2.9], ['Oriya', 33], 
      ['Punjabi', 29], ['Sanskrit', 0.01], ['Santhali', 6.5], 
      ['Sindhi', 2.5], ['Tamil', 61], ['Telugu', 74], ['Urdu', 52] 
     ]); 

     var options = { 
      title: 'Indian Language Use', 
      legend: 'none', 
      pieSliceText: 'label', 
      slices: { 4: {offset: 0.2}, 
        12: {offset: 0.3}, 
        14: {offset: 0.4}, 
        15: {offset: 0.5}, 
      }, 
     }; 

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

因此,我想再次使用饼图让投资者看看完成的工作量。

这是我的小提琴手。

Check Fiddler

回答

0

看到下面的工作片段...

google.charts.load('current', { 
 
    callback: function() { 
 
    drawChart('Database', 45); 
 
    drawChart('Front-end', 35); 
 
    drawChart('Web Design', 60); 
 
    }, 
 
    packages:['corechart'] 
 
}); 
 

 
function drawChart(task, complete) { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ['Task', task], 
 
    ['Complete', complete], 
 
    ['Remaining', 100 - complete] 
 
    ]); 
 

 
    var options = { 
 
    title: task, 
 
    pieHole: 0.3 
 
    }; 
 

 
    var container = document.body.appendChild(document.createElement('div')); 
 
    var chart = new google.visualization.PieChart(container); 
 
    chart.draw(data, options); 
 
}
<script src="https://www.gstatic.com/charts/loader.js"></script>

+0

这是方式更是我所期待的,谢谢,这是伟大的! –

1

传递一个变量在圆饼图中的数据部分,表示工作尚未完成。您可以自己硬编码,也可以使用通过从总数中减去完成的工作来计算的值。

E.g.

数据库= 45;

后端= 35;

网页设计= 60;

工作剩余= 300 - [数据库+后端+网页设计];

您可以在饼图中将其颜色设置为灰色,并将其名称留空。

+0

you'res是好事,感谢 –