How should controls be set up for jqPlot and JSON data in MVC?

问题

I'm currently working with jqPlot for the first time and finding it difficult find any information on how to set up the control for a barchart. So far I have been able to set up the linegraph and pie chart examples but the barchart has stumped me.

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

    public ActionResult PieChartJSON()
    {
        List<PieChartData> sampleData = new List<PieChartData>();
        PieChartData test = new PieChartData();
        PieChartData test2 = new PieChartData();
        PieChartData test3 = new PieChartData();
        PieChartData test4 = new PieChartData();
        PieChartData test5 = new PieChartData();

        test.Label = "tara";
        test.Value = 3;
        sampleData.Add(test);

        test2.Label = "becky";
        test2.Value = 5;
        sampleData.Add(test2);

        test3.Label = "gareth";
        test3.Value = 3;
        sampleData.Add(test3);

        test4.Label = "mark";
        test4.Value = 8;
        sampleData.Add(test4);

        test5.Label = "james";
        test5.Value = 8;
        sampleData.Add(test5);

        return Json(sampleData, JsonRequestBehavior.AllowGet);
    }

This is an example of the piechart I have created. If possible can someone give me an example of how the barchart JSON data should be formatted?

This is the view the JSON data is being inputted into:

    jQuery(document).ready(function () {
    urlDataJSON = '/Home/PieChartJSON';

    $.getJSON(urlDataJSON, "", function (data) {
        var dataSlices = [];
        var dataLabels = "";

        $.each(data, function (entryindex, entry) {
            dataSlices.push(entry['Value']);
            dataLabels = dataLabels + entry['Label'];
        });
        options = {
            legend: { show: true },
            title: 'Poll Results',
            seriesDefaults: {
                // Make this a pie chart.
                renderer: jQuery.jqplot.PieRenderer,
                rendererOptions: {
                    // Put data labels on the pie slices.
                    // By default, labels show the percentage of the slice.
                    showDataLabels: true
                }
            }
        }
        var plot = $.jqplot('pieChart', [dataSlices], options);
    });
});

And this is the chart i get on the webpage:

EDIT: embedding the screen capture isn't working. So I'll include a link to it. http://imgur.com/xwo3E

回答1:

I don't see here what you are doing with dataLabels. Also I only guess that the thing you do not like about your pie chart is that your legend doesn't show labels, right?

I think you should set your data in a different way. Take a look at one of my other examples related to use of pie chart, available here. Effectively, your problem comes down to setting of a pair, first label then value, to each row of your data, like in the linked code:

var row = [percentage, count];
data.push(row);

Therefore, in your case you would have:

var dataSlices = [];
$.each(data, function (entryindex, entry) {
    var row = [entry['Label'], entry['Value']];
    dataSlices.push(row);
});

来源：https://stackoverflow.com/questions/10495860/how-should-controls-be-set-up-for-jqplot-and-json-data-in-mvc

标签

jquery

asp.net-mvc

json

jqplot