如何使用數據庫中的數據繪製Google餅圖（或甜甜圈）圖表

我想在我的MVC項目上繪製餅圖或圓環圖。我可以繪製它沒有數據庫。但我想用數據庫中的數據來繪製它。我怎樣才能做到這一點？如何使用數據庫中的數據繪製Google餅圖（或甜甜圈）圖表

這裏是圓環圖我的樣本代碼，而無需數據庫：

<html> 
<head> 
    <title>Chart</title> 
    <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([ 
       ['Task', 'Hours per Day'], 
       ['Work', 11], 
       ['Eat', 2], 
       ['Commute', 2], 
       ['Watch TV', 2], 
       ['Sleep', 7] 
      ]); 

      var options = { 
       title: 'My Daily Activities', 
       pieHole: 0.4, 
      }; 

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

來源

2016-04-21 Onur Karaoğlan

你基本上需要生成類似於您的JavaScript陣列中的數據在你的操作方法，並傳遞到您的視圖。我在這裏硬編碼。但是你可以用數據庫中的數據替換它。

public ActionResult Index() 
{ 
    var data = new List<List<object>>() 
    { 
     new List<object> 
     { 
      "Task","Hours per day" 
     }, 
     new List<object> 
     { 
      "Work",45 
     } 
     , 
     new List<object> 
     { 
      "Eat",25 
     }, 
     new List<object> 
     { 
      "Commute to work",30 
     } 
    }; 
    return View(data); 
}

現在你的觀點會被強類型到List<List<object>>

@model List<List<object>>

現在在同一視圖的腳本部分，序列化模型到一個js變量（陣列）和使用，作爲輸入到arrayToDataTable方法。

var dataArr = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model)); 
var data = google.visualization.arrayToDataTable(dataArr);

來源

2016-04-21 15:10:28 Shyju

如何使用數據庫中的數據繪製Google餅圖（或甜甜圈）圖表

回答

相關問題