Google Chart MVC 4

时间:2017-02-08 02:01:34

标签: asp.net-mvc-4 google-api google-visualization

我正在使用Json在我的Controller中返回数据,在我的View中,我正在尝试获取Json数据并使用Google图表API,我正在尝试显示它,但我什么都没得到。但是,如果我单独调用数据动作结果,我就会获得数据。

在我的控制器[主页]中:

public class HomeController : Controller
{
    public class PieChart
    {
        public string Name { get; set; }
        public decimal valor { get; set; }
    }

    public IEnumerable<PieChart> CreateDataList()
    {
        var data = new List<PieChart>()
        {
            new PieChart() {Name = "Introduction", valor = 20},
            new PieChart() {Name = "InBasic 1", valor = 60},
            new PieChart() {Name = "PHP", valor = 80}
        };

        return data;
    }

    public ActionResult GetData()
    {
        return Json(CreateDataList(), JsonRequestBehavior.AllowGet);
    }

    public ActionResult Chart()
    {
        return View();
    }
}

并在我的视图[Chart.cshtml]中:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
google.charts.load('current', { 'packages': ['corechart'] });

function drawVisualization() {
    $.get('GetData', {}, function(data) {
        var tdata = new google.visualization.DataTable();

        tdata.addColumn('string', 'Year');
        tdata.addColumn('number', 'Hours');

        for (var i = 0; i < data.length; i++) {
            tdata.addRow([data[i].Name, data[i].valor]);
        }

        // Create and draw the visualization.
        new google.visualization.PieChart(document.getElementById('visualization')).
            draw(tdata, { title: "Top Videos", pieHole: 0.4 });


    });
};

google.setOnLoadCallback(drawVisualization);

但是,我的观点一无所获。

任何指针?

0 个答案:

没有答案