1

我目前是第一次使用 jqPlot，发现很难找到有关如何设置条形图控件的任何信息。到目前为止，我已经能够设置折线图和饼图示例，但条形图难住了我。

        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 数据的示例吗？

这是正在输入 JSON 数据的视图：

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

这是我在网页上得到的图表：

编辑：嵌入屏幕截图不起作用。所以我会附上它的链接。 http://imgur.com/xwo3E

4

1 回答 1

2

我在这里看不到你在做什么dataLabels。另外我猜你不喜欢你的饼图的地方是你的图例没有显示标签，对吧？

我认为您应该以不同的方式设置数据。看看我在此处提供的与使用饼图相关的其他示例之一。实际上，您的问题归结为对数据的每一行设置一对，第一个标签，然后是值，就像在链接代码中一样：

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

因此，在您的情况下，您将拥有：

var dataSlices = [];
$.each(data, function (entryindex, entry) {
    var row = [entry['Label'], entry['Value']];
    dataSlices.push(row);
});
于 2012-05-08T11:14:44.493 回答