Question

我想生成一个图表但没有显示结果。这是我的控制器代码：

public dynamic Get(int year)
        {
            var alldata = (from item in db.PT_OrderedList_vw
                           where item.expected_date.Value.Year == year
                           group item by item.expected_date.Value.Month into grp
                           select new
                           {
                               totalPT = grp.Sum(x => x.totalPT.Value),
                               Month = (double)grp.Max(x => x.expected_date.Value.Month)
                           }).ToList();
            var final_data = new[]
                {  
                    new { label="Purchase", data = alldata.Select(x=>new double[]{ x.totalPT, x.Month })}

                };

            final_data;
        }

查看：

<section style="width: 500px; margin: 10px; text-align:center;">
    <div id="placeholder" style="width: 500px; height: 300px;"></div>
    <h3 style="font-size:1.4em">Traffic Overview - 2012 </h3>
</section>

我放在视图页面上方的脚本：

<script>
    var dataurl = 'Get/';
    // setup plot
    var options = {
        legend: {
            show: true,
            margin: 10,
            backgroundOpacity: 0.9
        },
        points: {
            show: true,
            radius: 3
        },
        lines: {
            show: true
        },
        grid: { hoverable: true, clickable: true },
        yaxis: { min: 0, tickFormatter: formatter },
        xaxis: { ticks: [[1, "Jan"], [2, "Feb"], [3, "Mar"], [4, "Apr"], [5, "May"], [6, "Jun"], [7, "Jul"], [8, "Aug"], [9, "Sep"], [10, "Oct"], [11, "Nov"], [12, "Dec"]] }

    };
    function formatter(val, axis) {
        return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    }
    $.ajax({
        url: dataurl,
        method: 'GET',
        data: { year: 2016 },
        dataType: 'json',
        success: function (data) {
            $.plot($("#placeholder"), data, options);
        }
    });


    var previousPoint = null;
    $("#placeholder").bind("plothover", function (event, pos, item) {
        if (item) {
            if (previousPoint != item.dataIndex) {
                previousPoint = item.dataIndex;

                $("#tooltip").remove();
                var x = item.datapoint[0],
                    y = item.datapoint[1].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                showTooltip(item.pageX, item.pageY, item.series.label + ": " + y);

            }
        }
        else {
            $("#tooltip").remove();
            previousPoint = null;
        }
    });


    function showTooltip(x, y, contents) {
        $('<div id="tooltip">' + contents + '</div>').css({
            position: 'absolute',
            display: 'none',
            top: y + 5,
            left: x + 5,
            border: '1px solid #fdd',
            padding: '2px',
            'background-color': '#fee',
            opacity: 0.80
        }).appendTo("body").fadeIn(200);
    }
</script>

结果：

我需要为这个生成一个图表，但它没有显示任何内容。这是我第一次这样做，不知道这个代码有什么问题。我只研究了一切，并按照google提供的一些步骤进行。

我需要建议或建议，以便我可以实现此图表。

Answer 1

您的控制器代码必须返回json的ActionResult。

public ActionResult Get(int year)
{

      //code omitted
      return Json(final_data;, JsonRequestBehavior.AllowGet);

}

<强> JsonResult Class

没有返回数据的flot图表

1 个答案: