如何在MVC中设置jqPlot和JSON数据的控件?

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


如何在MVC中设置jqPlot和JSON数据的控件? 已获得1个解决方法 2020-08-18 18:07:03 jquery

我目前是第一次使用jqPlot,发现很难找到有关如何设置barchart控件的任何信息.到目前为止,我已经能够设置折线图和饼图示例,但是barchart使我感到困惑.

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

这是我创建的piechart的一个示例.如果可能的话,有人可以给我一个如何格式化barchart 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


如何在MVC中设置jqPlot和JSON数据的控件? 方法1

我在这里看不到您在使用 dataLabels 做什么.另外,我只猜测您不喜欢饼图的原因是您的传说没有显示标签,对吗?

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

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

因此,在你的情况下,你会有:

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

.htaccess .net .net-core 2d 3d 3d-printing ab-initio abp abstract-syntax-tree actions-on-google actionscript-3 active-directory activemq activemq-artemis acumatica adobe-xd aframe ag-grid agora.io air airflow ajax akka alert alexa algorithm alignment allure amadeus amazon-cloudformation