javascript - 如何向JQWidget饼图添加数组？

Question

我正在尝试使用 JQWidget饼形图。最初的示例位于文本文件中，但我想在图表中使用我自己的值。我有 4 个部分(A、B、C、未知)，总计为 100 来创建饼图。

类别 A 的值为 APercent

类别 B 的值为 BPercent

类别 C 的值为 CPercent

类别未知的值为 UKPercent

我一直试图将所有值添加到饼图中。目前，我的图表加载了四个图例，但没有名称，并且仅加载其中一个类别。

 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) + '%';
                                        },
                                    }
                                ]
                        }
                    ]
            };

如有任何帮助或建议，我们将不胜感激。先感谢您。如果我对某些事情不清楚或太模糊，请告诉我。再次感谢您!

Answer 1

首先，您的数组必须具有至少具有 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);

您可以在此处查看结果 http://jsfiddle.net/znwua337/1/