javascript - 如何显示 JQPLOT 图而不是长文本

Question

我在 Controller 类中有一个返回 JSON 数据的方法:

public ActionResult ChartDataJSON()
{
    Chart chart = new Chart();
    DataSet ds = dbLayer.GetChartData();
    DataTable dtChartData = ds.Tables[0];
    List<jqplotModel> chartData = new List<jqplotModel>();

    if (dtChartData .Rows.Count != 0)
    {
        foreach (DataRow row in dtChartData .Rows)
        {
            chartData.Add(new jqplotModel{ Date = DateTime.Parse(@row["Date"].ToString()), Demand= Convert.ToDouble(@row["Demand"].ToString()), Supply= Convert.ToDouble(@row["Supply"].ToString()) });
        }
    }
    return Json(chartData, JsonRequestBehavior.AllowGet);
}

有人知道如何在我的脚本中使用它吗？我试过这些线，但没有显示图表

<script type="text/javascript">
    $(document).ready(function () {
        var types = ['Demand', 'Supply'];               

        var rawData =  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;
        };

        // The url for our json data
        var jsonurl = "/ChartController/ChartDataJSON";
        var plotData = []

        for (var i = 0; i < rawData.length; i++) {
            //Parse the date.
            var date = new Date(+rawData[i].Date.match(/\d+/));

            plotData[i] = [date, rawData[i].Demand];
        }

        var plotData2 = []

        for (var i = 0; i < rawData.length; i++) {
            //Parse the date.
            var date = new Date(+rawData[i].Date.match(/\d+/));

            plotData2[i] = [date, rawData[i].Supply];
        }

        var plot1 = $.jqplot('chart1', [plotData, plotData2], {
            height: 300,
            width: 300,
            title: 'Demand Supply',
            dataRenderer: rawData,
            dataRendererOptions: {
                unusedOptionalUrl: jsonurl
            },
            series: [
                    {},
                    { yaxis: 'y2axis' }
            ],
            axes: {
                xaxis: {
                    renderer: $.jqplot.DateAxisRenderer,
                    tickOptions: { formatString: '%#I %p' },
                    label: "Date",
                    tickInterval: '4 hour'
                },
                yaxis: {
                    label: "Demand",
                    labelRenderer: $.jqplot.CanvasAxisLabelRenderer

                },
                y2axis: {
                    label: "Supply",
                    labelRenderer: $.jqplot.CanvasAxisLabelRenderer
                }
            },
            highlighter: {
                show: true,
                sizeAdjust: 1
            },
            cursor: {
                show: false
            },
            legend: {
                show: true,
                labels: types,
                location: 'ne'
            }
        });

        $(window).bind('resize', function (event, ui) {
            if (plot1) {
                plot1.replot();
            }
        });
    });
</script>

当我运行它时，我看不到图表，并且页面显示如下的长文本:

[{"Demand":4422.45,"Supply":17660,"Date":"/Date(1236504600000)/","DateString":"3 PM"},{"Demand":5019.27,"Supply":20699,"Date":"/Date(1236508200000)/","DateString":"4 PM"},{"Demand":5030.35,"Supply":19917,"Date":"/Date(1236511800000)/","DateString":"5 PM"},{"Demand":5172.35,"Supply":23597,"Date":"/Date(1236515400000)/","DateString":"6 PM"},{"Demand":5656.51,"Supply":21572,"Date":"/Date(1236519000000)/","DateString":"7 PM"},{"Demand":4622.88,"Supply":7794,"Date":"/Date(1236522600000)/","DateString":"8 PM"},{"Demand":3116.21,"Supply":3427,"Date":"/Date(1236526200000)/","DateString":"9 PM"},{"Demand":1588.83,"Supply":1883,"Date":"/Date(1236529800000)/","DateString":"10 PM"},{"Demand":1394.15,"Supply":1403,"Date":"/Date(1236533400000)/","DateString":"11 PM"},{"Demand":1321.76,"Supply":3755,"Date":"/Date(1236537000000)/","DateString":"12 AM"},{"Demand":1130.98,"Supply":3474,"Date":"/Date(1236540600000)/","DateString":"1 AM"},{"Demand":1277.1,"Supply":1072,"Date":"/Date(1236544200000)/","DateString":"2 AM"},{"Demand":1214.68,"Supply":1025,"Date":"/Date(1236547800000)/","DateString":"3 AM"},{"Demand":2117.91,"Supply":1198,"Date":"/Date(1236551400000)/","DateString":"4 AM"},{"Demand":1658.97,"Supply":1485,"Date":"/Date(1236555000000)/","DateString":"5 AM"},{"Demand":1997.36,"Supply":3126,"Date":"/Date(1236558600000)/","DateString":"6 AM"},{"Demand":2147.37,"Supply":4785,"Date":"/Date(1236562200000)/","DateString":"7 AM"},{"Demand":2114.13,"Supply":5268,"Date":"/Date(1236565800000)/","DateString":"8 AM"},{"Demand":2389.84,"Supply":5264,"Date":"/Date(1236569400000)/","DateString":"9 AM"},{"Demand":2240.77,"Supply":5526,"Date":"/Date(1236573000000)/","DateString":"10 AM"},{"Demand":1802.43,"Supply":4530,"Date":"/Date(1236576600000)/","DateString":"11 AM"},{"Demand":1929.71,"Supply":6618,"Date":"/Date(1236580200000)/","DateString":"12 PM"},{"Demand":545.65,"Supply":2767,"Date":"/Date(1236583800000)/","DateString":"1 PM"},{"Demand":0,"Supply":1,"Date":"/Date(1236587400000)/","DateString":"2 PM"}]

任何人都可以帮我找出问题所在以及我在哪里做错了什么吗？

编辑:请注意，数据将是动态的，它将来自数据库，并通过 Controller 类中的编码将 JSON 脚本返回给 View 。请建议如何在 jqPlot 中传递/使用 JSON 对象(来自 ChartDataJSON() 方法)。

Answer 1

好的，这就是我的答案。

我的 Controller 如下:

public class jqPlotController : Controller
{    
    public ActionResult ChartDataJSON()
    {
        var chartData = new List<jqplotModel>();

        var point1 = new jqplotModel { Date = DateTime.Now.Date.ToString("yyyy-MM-dd h:mmtt"), Demand = Convert.ToDouble(1), Supply = Convert.ToDouble(3) };
        var point2 = new jqplotModel { Date = DateTime.Now.AddDays(10).Date.ToString("yyyy-MM-dd h:mmtt"), Demand = Convert.ToDouble(2), Supply = Convert.ToDouble(4) };
        var point3 = new jqplotModel { Date = DateTime.Now.AddDays(31).Date.ToString("yyyy-MM-dd h:mmtt"), Demand = Convert.ToDouble(6), Supply = Convert.ToDouble(6) };
        var point4 = new jqplotModel { Date = DateTime.Now.AddDays(106).Date.ToString("yyyy-MM-dd h:mmtt"), Demand = Convert.ToDouble(4), Supply = Convert.ToDouble(2) };
        chartData.Add(point1);
        chartData.Add(point2);
        chartData.Add(point3);
        chartData.Add(point4);

        return Json(chartData, JsonRequestBehavior.AllowGet);
    }

    //
    // GET: /jqPlot/

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

和模型:

public class jqplotModel
{
 public string Date { get; set; }
 public double Demand { get; set; }
 public double Supply { get; set; }
}

我在 ChartDataJSON 方法中硬编码了一个(非常!)简单的数据集。重构代码以类似格式输出数据对您来说非常简单。

由于我是 jqPlot 的新手，我花了一段时间才弄清楚如何将 DateTime 对象传递给这个 javascript 库。每次我尝试 jqPlot 都会给我相当神秘的与时间相关的错误消息。我找到的解决方案是将其格式化为 jqPlot 理解的日期时间，例如'2008-09-30 4:00PM'(参见示例 here)- 我相信这对其他对 jqPlot 的日期处理感到困惑的人很有用!

View 如下所示:

<script src="@Url.Content("Scripts/jquery-1.8.2.min.js")" type="text/javascript"></script>
<script src="@Url.Content("Scripts/jqPlot/jquery.jqplot.js")"  type="text/javascript"></script>
<script src="@Url.Content("Scripts/jqPlot/plugins/jqplot.barRenderer.min.js")"  type="text/javascript"></script>
<script src="@Url.Content("Scripts/jqPlot/plugins/jqplot.categoryAxisRenderer.min.js")"  type="text/javascript"></script>
<script src="@Url.Content("Scripts/jqPlot/plugins/jqplot.dateAxisRenderer.min.js")"  type="text/javascript"></script>
<script src="@Url.Content("Scripts/jqPlot/plugins/jqplot.pointLabels.min.js")"  type="text/javascript"></script>
<script src="@Url.Content("Scripts/jqPlot/plugins/jqplot.canvasAxisTickRenderer.min.js")"  type="text/javascript"></script>
<script src="@Url.Content("Scripts/jqPlot/plugins/jqplot.highlighter.min.js")"  type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function () {
        // The url for our json data
        var url = '@Url.Action("ChartDataJSON", "jqPlot")';

        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;
            }
        });

        var demands = [];
        var supplys = [];

        for (i = 0; i < ret.length; i++) {
            // Save the data to the relevant array. Note how date at the zeroth position (i.e. x-axis) is common for both demand and supply arrays.
            demands.push([ret[i].Date, ret[i].Demand]);
            supplys.push([ret[i].Date, ret[i].Supply]);
        }

        var plot1 = $.jqplot('chart1', [demands, supplys], {
            title: "Demand Supply",
            axes: {
                xaxis: {
                    renderer: $.jqplot.DateAxisRenderer,
                    tickOptions: {
                        formatString: '%d/%m/%Y'
                    },

                    label: 'Date'
                },
                yaxis: {
                    label: 'Demand'
                },
                y2axis: {
                    label: 'Supply'
                }
            },
            series: [
                { yaxis: 'yaxis', label: 'demands' },
                { yaxis: 'y2axis', label: 'supplys' }
            ],
            highlighter: {
                show: true,
                sizeAdjust: 1
            },
            cursor: {
                show: false
            }
        });
    });
</script>

@{
    ViewBag.Title = "jQPlot Demo";
}

<h2>@ViewBag.Title</h2>
<div id="chart1" style="height: 400px; width: 600px;"></div>

请注意，在我的解决方案中，我没有使用 datarender 选项。相反，我使用 jquery ajax 调用检索数据，然后为需求和供应数据创建两个单独的数组。这些数组中的每一个在 x 轴上都有日期，然后在 y 轴上有它们各自的值(因此日期显然是两个数组的共同点)。

一旦我有了这些数据，我就通过 jqPlot 绘制它，结果如下图:

仍然需要做一些工作来完善轴上的刻度和标签，但希望这是您想要的那种图表。如果没有，那么这对我来说无疑是一项很好的学习任务，我希望其他人会觉得这很有用。