应该如何控制设置在MVC jqPlot和JSON数据？ [英] How should controls be set up for jqPlot and JSON data in MVC?

问题描述

我目前正在jqPlot工作首次发现很难找到关于如何建立一个柱状图控制的任何信息。到目前为止，我已经能够建立线图和饼图的例子，但柱状图难倒我了。

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

这是我所创建的饼图的一个例子。如果可能的话能有人给我的柱状图JSON数据应该如何格式化的例子吗？

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?

这是JSON数据被输入到视图：

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:

编辑：嵌入屏幕捕获不能正常工作。因此，我将包括一个链接到它。
http://imgur.com/xwo3E

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

推荐答案

我不明白你在这里与 dataLabels 做什么。此外，我只能猜测，你不喜欢你饼图的事情是，你的传奇不显示标签，对吧？

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?

我认为你应该以不同的方式设置你的数据。看看我用饼图相关的其他的例子之一，可在这里。
实际上，你的问题归结为一对的设置，首先标号，则价值，你的数据的每一行，就像链接code：

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

这篇关于应该如何控制设置在MVC jqPlot和JSON数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！