Javascript 如何将数组添加到JQWidget饼图?

Javascript 如何将数组添加到JQWidget饼图?,javascript,jquery,charts,pie-chart,jqwidget,Javascript,Jquery,Charts,Pie Chart,Jqwidget,我正在尝试使用饼图。最初的例子是在一个文本文件中,但我想在图表中使用我自己的值。我有4个部分(A、B、C、未知),加起来总共100个部分来创建饼图 A类的价值为1美分 类别B的值为BPercent 类别C的值为CPercent 类别未知的值为%1 我一直在尝试将所有值添加到饼图中。目前我的图表加载四个图例,但没有名称,只加载其中一个类别 var bigPie = []; bigPie.push({ A: APercent });

我正在尝试使用饼图。最初的例子是在一个文本文件中,但我想在图表中使用我自己的值。我有4个部分(A、B、C、未知),加起来总共100个部分来创建饼图

A类的价值为1美分

类别B的值为BPercent

类别C的值为CPercent

类别未知的值为%1

我一直在尝试将所有值添加到饼图中。目前我的图表加载四个图例,但没有名称,只加载其中一个类别

 var bigPie = [];


       bigPie.push({
         A: APercent
        });
       bigPie.push({
         B: BPercent
        });
       bigPie.push({
         C: CPercent
        });
       bigPie.push({
         Unknown: UKPercent
        });





$(document).ready(function () {

 // prepare chart data as an array
          // prepare jqxChart settings
            var settings = {
                title: "Information",
                description: "Legs",
                enableAnimations: true,
                showLegend: true,
                showBorderLine: true,
                legendLayout: { left: 700, top: 160, width: 300, height: 200, flow: 'vertical' },
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
                source: bigPie,

                colorScheme: 'scheme03',
                seriesGroups:
                    [
                        {
                            type: 'pie',
                            showLabels: true,
                            series:
                                [
                                    {
                                        dataField: ‘A',
                                        displayText: ‘%',
                                        labelRadius: 170,
                                        initialAngle: 15,
                                        radius: 145,
                                        centerOffset: 0,
                                        formatFunction: function (value) {
                                            if (isNaN(value))
                                                return value;
                                            return parseFloat(value) + '%';
                                        },
                                    }
                                ]
                        }
                    ]
            };


如有任何帮助或建议,将不胜感激。先谢谢你。如果我对某事不清楚或太含糊,请让我知道。再次感谢你

首先,数组必须具有至少具有2个属性的对象。 一个用于标签(在您的案例中为A、B、C、D) 另一个表示值(在您的案例中,是APercent、BPercent、CPercent、UKPercent) 看起来像这样

var bigPieTobe = [
    {category:"A", percent: 20}
    , {category:"B", percent: 30}
    , {category:"C", percent: 40}
    , {category:"Unknown", percent: 10}
];
其次,您必须告诉jqxChart哪个属性是类别,哪个属性是值

           dataField: 'percent',
            displayText: 'category',
完整的源代码如下

// prepare chart data as an array
var bigPieTobe = [
    {category:"A", percent: 20}
    , {category:"B", percent: 30}
    , {category:"C", percent: 40}
    , {category:"Unknown", percent: 10}
];

// prepare jqxChart settings
var settings = {
    title: "Information",
    description: "Legs",
    enableAnimations: true,
    showLegend: true,
    showBorderLine: true,
    legendLayout: { left: 700, top: 160, width: 300, height: 200, flow: 'vertical' },
    padding: { left: 5, top: 5, right: 5, bottom: 5 },
    titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
    source: bigPieTobe,

    colorScheme: 'scheme03',
    seriesGroups:
    [
        {
            type: 'pie',
            showLabels: true,
            series:
            [
                {
                    dataField: 'percent',
                    displayText: 'category',
                    labelRadius: 170,
                    initialAngle: 15,
                    radius: 145,
                    centerOffset: 0,
                    formatFunction: function (value) {
                        if (isNaN(value))
                            return value;
                        return parseFloat(value) + '%';
                    }
                }
            ]
        }
    ]
};
$("#jqxChart").jqxChart(settings);
你可以在这里看到结果