简体   繁体   English

JSON数据中的饼图

[英]Pie chart from JSON Data

I have a controller that generates the following json data: 我有一个生成以下json数据的控制器:

[

    {
        "title": "Option 0",
        "votes": 0
    },
    {
        "title": "Option 1",
        "votes": 1
    },
    {
        "title": "Option 2",
        "votes": 2
    },
    {
        "title": "Option 3",
        "votes": 3
    },
    {
        "title": "Option 4",
        "votes": 4
    },
    {
        "title": "Option 5",
        "votes": 5
    },
    {
        "title": "Option 6",
        "votes": 6
    },
    {
        "title": "Option 7",
        "votes": 7
    },
    {
        "title": "Option 8",
        "votes": 8
    },
    {
        "title": "Option 9",
        "votes": 9
    }

]

I want to make a pie chart from this data using jqplot. 我想使用jqplot从此数据制作一个饼图。 I am able to make a chart by following a tutorial but i am not able to show the text labels with the slices. 我可以按照教程制作图表,但无法显示带有切片的文本标签。 Here is my js code: 这是我的js代码:

jQuery(document).ready(function () {
    urlDataJSON = '/Poll/PollData?pollId=3';

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

        $.each(data, function (entryindex, entry) {
            dataSlices.push(entry['votes']);
            dataLabels = dataLabels + entry['title'];
        });
        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('chartdiv', [dataSlices], options);
    });
});              

please tell me how do i show the text associated with pie chart slices. 请告诉我如何显示与饼图切片关联的文本。 I know i am missing something but again i am a newbie to javascript. 我知道我缺少什么,但我还是JavaScript的新手。

Your data structure is incorrect this link takes you to a working example. 您的数据结构不正确,此链接将您带到一个有效的示例。

jqPlot example jqPlot示例

I think this will work 我认为这会起作用

dataSlices.push([entry['title'], entry['votes']]);

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM