0

我正在尝试使用 asp.net MVC 呈现 jqPlot 条形图。不确定如何使用从控制器返回的数据在客户端构建数组。

我正在尝试与此类似，http://jsfiddle.net/du8GZ/

@foreach (var d in Model.SampleChart)
        {
         // What to write here?
        }

public class SampleChart
    {
        public int Count { get; set; }
        public string Name { get; set; }
    }

        public ActionResult BarIn()
        {
                List<SampleChart> data = new List<SampleChart>();
                SampleChart bar;
                Random r = new Random();
                for (int i = 0; i < 10; i++)
                {
                        bar = new SampleChart();
                        bar.Count = i;
                        bar.Name = "Sample " + i.ToString();
                        data.Add(bar);
                }

                return View(data);
        }

<link class="include" rel="stylesheet" type="text/css" href="@Url.Content("~/scripts/jqplot/css/jquery.jqplot.min.css")" />
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="@Url.Content("~/scripts/jqplot/excanvas.min.js")"></script><![endif]-->
<script type="text/javascript" src="@Url.Content("~/scripts/jqPlot/jquery.jqplot.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/scripts/jqplot/jqplot.categoryAxisRenderer.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/scripts/jqPlot/jqplot.barRenderer.min.js")"></script>

<div class="example-content">
    <!-- Example scripts go here -->
    <style type="text/css">
        .jqplot-target
        {
            margin: 30px;
        }
        .tooltipCss
        {
            position: absolute;
            background-color: #b2b1ac;
            color: White;
            z-index: 200;
            padding: 5px;
            border-radius: 5px;
            display: none;
        }
    </style>
    <div id="chart2" class="plot" ></div>
</div>

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

        var data = new Array();
        var series = new Array();

        @foreach (var d in Model.SampleChart)
        {

        }
        plot2 = $.jqplot('chart2', data, {

            seriesDefaults: {
                renderer: $.jqplot.BarRenderer,
                rendererOptions: {
                    barDirection: 'horizontal',
                    barPadding: 10,
                    barMargin: 15 
                }
            },
            series: series,
        axes: {
            yaxis: {
                renderer: $.jqplot.CategoryAxisRenderer
            }
        }
        });
        $('#chart2').bind('jqplotDataMouseOver',
            function (ev, seriesIndex, pointIndex, data) {
                //$('#info2').html('series "' + series[seriesIndex].label + '" point "' + (pointIndex + 5) + '"<br /> value "' + data[1] + '"');
                //$('#info2').css({ "left": ev.pageX + 3, "top": ev.pageY })
                $('#info2').show();
            }
        );
        $('#chart2').bind('jqplotDataUnhighlight',
            function (ev) {
                $('#info2').hide();
            }
        );
    });
</script>
<div id="info2" class="tooltipCss"></div>
4

1 回答 1

0

客户端的数组实际上是用 JSON 表示的，所以您所要做的就是创建一个视图模型，该模型将保存数组的表示并将其作为 JSON 转储到隐藏字段中......就像这样：

@Html.Hidden("BarGraphData",Json.Encode(Model.BarGraphData))

然后使用 jQuery 将数据发送到 jqPlot，如下所示：

var columnChartData = $.parseJSON($('#BarGraphData').val());
var plot2 = $.jqplot('chart1', columnChartData ,{....
于 2013-03-25T09:20:42.773 回答