Question

我正在尝试使用JQWidget饼图。最初的例子是在一个文本文件中，但我想在图表中使用我自己的值。我有4个部分（A，B，C，未知），最多可添加100个以创建饼图。

类别A的值为APercent

B类的值为BPercent

C类的值为CPercent

类别未知的值为UKPercent

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

enter image description here

 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/

如何将数组添加到JQWidget饼图？

1 个答案: