我正在尝试使用 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) + '%';
},
}
]
}
]
};
如有任何帮助或建议,我们将不胜感激。先感谢您。如果我对某些事情不清楚或太模糊,请告诉我。再次感谢您!
最佳答案
首先,您的数组必须具有至少具有 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/
关于javascript - 如何向JQWidget饼图添加数组?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26984134/