Question

iam使用列高图显示一些data.iam使用ajax调用返回json数据

[{"department":"DESIGNING","Present":8,"Total":44},{"department":"SEO","Present":0,"Total":1},{"department":"COORDINATION","Present":1,"Total":2}]

我创建了一个带有硬编码值的高图表，如下所示

$(function () {
    function visitorData(data) {
        $('#container').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: 'Attendance Today'
            },
            subtitle: {                
            },
            xAxis: {
                categories: [
                    'Designing',
                    'SEO',
                    'CO-Ordinator'
                ]
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'No.of Employees'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: [{
                name: 'Present',
                data: [5, 10, 15]

            }, {
                name: 'Total',
                data: [20, 30, 40]

            }]
        });        
    }   
});

现在我想动态地将json数据包含到高级图表中，而不仅仅是硬编码。我可以实现这一点吗？

Answer 1

首先，您将创建一个表示要发回的数据的对象：

<强>模型

public class AnObject
{
    public string Department { get; set; }
    public int Present { get; set; }
    public int Total { get; set; }
}

public class MyData
{
    public List<AnObject> MyObjects { get; set; }
}

然后，您将创建一个将填充的MyData对象作为json返回的操作。

<强>控制器

public ActionResult GetData()
{
    var myData = new MyData();

    myData.MyObjects = // populated from a db

    return Json(myData, JsonRequestBehavior.AllowGet);
}

然后您可以通过javascript或jQuery调用您的操作，并将结果传递给您的visitorData函数

<强>使用Javascript / jQuery的

var aUrl = '@Url.Action("GetData")';

$.getJSON(aUrl, {}, 
  function (data) {
                    visitorData(data);
 });

高图中的Json数据

1 个答案: