Javascript 如何将数组添加到JQWidget饼图?
我正在尝试使用饼图。最初的例子是在一个文本文件中,但我想在图表中使用我自己的值。我有4个部分(A、B、C、未知),加起来总共100个部分来创建饼图 A类的价值为1美分 类别B的值为BPercent 类别C的值为CPercent 类别未知的值为%1 我一直在尝试将所有值添加到饼图中。目前我的图表加载四个图例,但没有名称,只加载其中一个类别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 });
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);
你可以在这里看到结果