MVC jQPlot JSON dataRenderer不绘制图形

Question

我正在使用 MVC4 和 jQPlot 来构建多个笔 DateTime X 轴图。

我在控制器上使用以下代码通过 ajax 检索服务器数据：

public ActionResult GetPlotData()
        {
                List<Tuple<DateTime, decimal>> plotData = new List<Tuple<DateTime, decimal>>();

                ///
                /// Plot data
                /// 
                plotData.Add(new Tuple<DateTime, decimal>(DateTime.Now, 10));
                plotData.Add(new Tuple<DateTime, decimal>(DateTime.Now.AddHours(-1), 20));
                plotData.Add(new Tuple<DateTime, decimal>(DateTime.Now.AddHours(-1), 30));
                plotData.Add(new Tuple<DateTime, decimal>(DateTime.Now.AddHours(-1), 40));
                plotData.Add(new Tuple<DateTime, decimal>(DateTime.Now.AddHours(-1), 50));

                return Json(plotData, JsonRequestBehavior.AllowGet);
            }

这是我的观点：

<script type="text/javascript" src="~/Scripts/jqplot/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="~/Scripts/jqplot/plugins/jqplot.highlighter.min.js"></script>
<script type="text/javascript" src="~/Scripts/jqplot/plugins/jqplot.cursor.min.js"></script>
<script type="text/javascript" src="~/Scripts/jqplot/plugins/jqplot.dateAxisRenderer.min.js"></script>
<script type="text/javascript" src="~/Scripts/jqplot/plugins/jqplot.json2.min.js"></script>

<div id="chart"></div>

<script type="text/javascript">

    $(document).ready(function () {

        var ajaxDataRenderer = function (url, plot, options) {
            var ret = null;
            $.ajax({
                // have to use synchronous here, else the function 
                // will return before the data is fetched
                async: false,
                url: url,
                dataType: "json",
                success: function (data) {
                    ret = data;
                }
            });
            return ret;
        };

        var jsonurl = '@Url.Action("GetPlotData", "UserPDataTrend")';

        var plot1 = $.jqplot('chart', jsonurl, {
            title: 'Tendência Dados de Processo',
            dataRenderer: ajaxDataRenderer,
            axes: {
                xaxis: {
                    renderer: $.jqplot.DateAxisRenderer,
                    tickOptions: {
                        formatString: '%b&nbsp;%#d'
                    }
                },
                yaxis: {
                    tickOptions: {
                        formatString: '$%.2f'
                    }
                }
            },
            highlighter: {
                show: true,
                sizeAdjust: 7.5
            },
            cursor: {
                show: false
            }
        });
    });

</script>

这是我从浏览器获得的（通过浏览器上的 F12 获得）：

[{"Item1":"\/Date(1386710588647)\/","Item2":10},{"Item1":"\/Date(1386706988649)\/","Item2":20},{"Item1":"\/Date(1386706988649)\/","Item2":30},{"Item1":"\/Date(1386706988649)\/","Item2":40},{"Item1":"\/Date(1386706988649)\/","Item2":50}]

当然，jqPlot 的数据是不可读的，但我尝试使用不同的类，将所有数据转换为字符串数组作为 Json 数据，但它们都不起作用。

如何在 Controller 中构建数据，以便 jQPlot 可以理解 DateTime 和 Value。

感谢您的帮助。

Answer 1

不要在控制器端更改数据，而是在 javascript 端更改数据 并将其转换为 jqplot 折线图的数组数组

        for (var i = 0; i < result.Data.length; i++) {
            var date = result.Data[i].Date;
            var value = result.Data[i].Value;
            date = moment(date).format("YYYY MM DD,h:mm:ss"); 
            arr.push([date, value]);
        }  

将数组传递给 jqplot 数据 这会工作