0

我正在尝试使用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) + '%';
                                        },
                                    }
                                ]
                        }
                    ]
            };

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

4

1 回答 1

2

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

于 2015-01-05T14:34:06.323 回答