Highchart - 系列[](名称,数据)作为控制器的json。如何分配Highchart系列?

时间:2016-06-02 07:36:49

标签: javascript json ajax

型号:

 public class TemperatureData
    {
        public string name { get; set; }
        public double[] data { get; set; }
    }

控制器:

[HttpPost]
    public ActionResult GetData()
    {
        var json = "";
        try
        {
            List<TemperatureData> PlotData = new List<TemperatureData>();

            PlotData.Add(new TemperatureData
            {
                name = "Tokyo",
                data = new double[] {7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,
                  26.5, 23.3, 18.3, 13.9, 9.6}
            });
            PlotData.Add(new TemperatureData
            {
                name = "New York",
                data = new double[] {-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8,
                  24.1, 20.1, 14.1, 8.6, 2.5}
            });

            var jsonsrlzr = new JavaScriptSerializer();
             json = jsonsrlzr.Serialize(PlotData);

        }
        catch (Exception ex)
        {
        }
        return Json(json);
    }

我正在序列化并返回作为对ajax调用的响应。

查看:

@{
ViewBag.Title = "Index";
            //Layout = "~/Views/Shared/_Layout.cshtml";
}

<!DOCTYPE html>
<html>
<head>
    <title>Charts</title>

    <script src="~/Scripts/jquery-1.7.1.js"></script>
    <script src="~/Scripts/highcharts.js"></script>
</head>
<body>
    <input type="button" style="width: 100px" id="requestplot"      value="Plot" />
    <div id="container" style="background-color: aliceblue; width: 550px;     height: 400px; margin: 0 auto"></div>
</body>

<script type="text/javascript">
    var seriesdata = '';
    $(document).ready(function () {

    $.ajax({
        type: "POST",
        datatype: "json",
        //data: "testing",
        contentType: "application/json; charset=utf-8",
        url: '@Url.Action("GetData", "Home")',
        success: function (data) {

            seriesdata = data;
            drawchart(seriesdata);
            alert(seriesdata);

        },
            error: function (XMLHttpRequest, textStatus, errorThrown) {         alert(errorThrown); }

        }
        );

        function drawchart(seriesdata) {
            var options = {
            chart: {
                type: 'line'
            },
            title: {
                text: 'Average Temperatures'
            },
            subtitle: {
                text: 'All Cities Temp'
            },
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                   'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },
            yAxis: {
                title: {
                    text: 'Temperature (\xB0C)'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },

            tooltip: {
                valueSuffix: '\xB0C'
            },

            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle',
                borderWidth: 0
            },
            series: seriesdata


        };
        $('#container').highcharts(options);
    }

});

图表没有绘制?难道我做错了什么??我是MVC的新手。

如果我直接给出系列值,如下所示

series: [
               {
                   name: seriesdata.na,
                   data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,
                      26.5, 23.3, 18.3, 13.9, 9.6]
               },
               {
                   name: 'New York',
                   data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8,
                      24.1, 20.1, 14.1, 8.6, 2.5]
               },
               {
                   name: 'London',
                   data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0,
                      16.6, 14.2, 10.3, 6.6, 4.8]
               }
            ]

图表显示并绘制得很好。

需要帮助 感谢

0 个答案:

没有答案