google.visualiztion.ColumnChart()不起作用

时间:2016-03-17 14:58:18

标签: c# jquery ajax asp.net-mvc-4

以下是使用Google API创建柱形图的Jquery Ajax代码。

$(document).ready(function () { 
        //load Data Here
        var chartData = null;
        $.ajax({
            url: '/Dashboard/GetData',
            type: 'GET',
            dataType: 'json',
            data: '',
            success: function (d) {
                chartData = d; 
            },
            error: function () {
                alert('Error!');
            }
        }).done(function () {
            google.charts.load("current", { packages: ['corechart'] });
            drawChart(chartData);
        }).fail(function () {
            alert("Sorry. Server unavailable. ");
        });
    });`

    function drawChart(d) {
        var charData = d;
        var data = null; 
        data = google.visualization.arrayToDataTable(charData);

        var view = new google.visualization.DataView(data); 
        view.setColumns([0, {
            type: 'number',
            label: data.getColumnLabel(0),
            calc: function () { return 0; }
        }, {
            type: 'number',
            label: data.getColumnLabel(1),
            calc: function () { return 0; }
        }, {
            type: 'number',
            label: data.getColumnLabel(2),
            calc: function () { return 0; }
        }, {
            type: 'number',
            label: data.getColumnLabel(3),
            calc: function () { return 0; }
        }
        ]);

        var options = {
            title: 'Bodily Analysis',
            legend: 'bottom',
            hAxis: {
                title: 'Year',
                format: '#'
            },
            vAxis: {
                minValue: 0,
                maxValue: 1000,
                title: 'Measurements'
            },
            chartArea: {
                left: 100,
                top: 50,
                width: '70%',
                height: '50%'
            },
            animation: {
                duration: 1000
            }
        };

        alert(data);
        var chart = new google.visualiztion.ColumnChart(document.getElementById('visualization'));

        alert(data);
        var runFirstTime = google.visualization.events.addListener(chart, 'ready', function () {
            google.visualization.events.removeListener(runFirstTime);
            chart.draw(data, options);
        });
        chart.draw(view, options);
    }

这是我的MVC控制器,它以JSON的形式从数据库返回数据。

public JsonResult GetData()
    {
        List<BusinessContact> Bc = new List<BusinessContact>();
        using (BusinessContContext db = new BusinessContContext())
        {
            Bc = db.BusinessContacts.OrderBy(a => a.birthDate).ToList();
        }

        var charData = new object[Bc.Count + 1];
        charData[0] = new object[]
        {
            "Birth",
            "height",
            "ChestMeasurement",
            "Weight"
        };
        int j = 0;
        foreach (var i in Bc)
        {
            j++;
            charData[j] = new object[]
            {
                Convert.ToDateTime(i.birthDate).Year,
                Convert.ToUInt32(i.height),
                Convert.ToUInt32(i.ChestMeasurement),
                Convert.ToUInt32(i.Weight)
            };
        }
        return new JsonResult{Data = charData, JsonRequestBehavior = JsonRequestBehavior.AllowGet};
    }

我遇到的问题是,在从数据库获取JsonResult后,图表不会呈现。我注意到

之后没有提示警告
 var chart = new google.visualiztion.ColumnChart(document.getElementById('visualization'));

我需要帮助。

0 个答案:

没有答案