我正在尝试将动态数据加载到我的应用程序中的Fusion Chart中。我已经成功显示了静态数据。但是,在尝试显示动态数据时,我发现,我必须创建json对象以在UI中显示字段。
我成功工作的静态数据如下。
const dataSource = {
chart: {
subcaptionFontSize: '14',
numDivLines: ‘1’,
yAxisMinValue: '0',
yAxisMaxValue: '100',
showYAxisValues: '0',
paletteColors: ‘red’,
useDataPlotColorForLabels: '1',
showPercentInTooltip: '0',
divLineAlpha: '0',
},
data: [
{
label: ‘Apple,
value: '100'
},
{
label: ‘Samsung’,
value: '39'
},
{
label: ‘LG’,
value: '38'
},
{
label: ‘RedMi’,
value: '32'
}
],
annotations: {
showBelow: '0',
autoScale: '1',
groups: [{
id: 'user-images',
items: [{
id: 'dyn-label-bg',
color: ‘green’,
align: 'left',
type: 'text',
text: ‘Apple,
x: '$canvasStartX+30’,
y: '$dataset.0.set.0.ENDY-30'
}, {
id: 'dyn-label-bg',
color: ‘green’,
align: 'left',
type: 'text',
text: ‘Samsung’,
x: '$canvasStartX+30',
y: '$dataset.0.set.1.ENDY-30'
}, {
id: 'dyn-label-bg',
color: 'green',
align: 'left',
type: 'text',
text: 'LG',
x: '$canvasStartX+30’,
y: '$dataset.0.set.2.ENDY-30'
},
{
id: 'dyn-label-bg',
color: ‘green’,
align: 'left',
type: 'text',
fontSize: 12,
text: ‘RedMi`,
x: '$canvasStartX+30’,
y: '$dataset.0.set.3.ENDY-30'
}
]
}]
}
};
我正在从我的api获取动态数据。
所以,它就像3个数组, 1.标题 2.价值观 3.索引
然后是我的动态数据json对象的形成
jsonTextValues = {
label: TitlesArray, value: ValuesArray
};
jsonAnnotations = {
id: 'dyn-label-bg',
color: '#000000',
align: 'left',
type: 'text',
text: TitlesArray,
fontSize: 12,
x: '$canvasStartX+30',
y: `$dataset.0.set.${IndexesArray}.ENDY-30`
}
if (data != nil) {
const graphData = {
chart: {
subcaptionFontSize: '14',
numDivLines: ‘1’,
yAxisMinValue: '0',
yAxisMaxValue: '100',
showYAxisValues: '0',
paletteColors: ‘red’,
useDataPlotColorForLabels: '1',
showPercentInTooltip: '0',
divLineAlpha: '0',
},
data: [
jsonTextValues
],
annotations: {
showBelow: '0',
autoScale: '1',
groups: [{
id: 'user-images',
items: [
jsonAnnotations
]
}]
}
};
}
但是,它没有循环并且在图形中没有任何显示。
有什么建议吗?
答案 0 :(得分:0)
我已使用以下代码修复了此问题。也许将来会帮助某人。
myArray.map((item, index) => {
jsonTextValues.push({
label: item.TextTitle, value: item.value
});
jsonAnnotations.push({
id: 'dyn-label-bg',
color: '#000000',
align: 'left',
type: 'text',
text: `${item.TextTitle}`,
fontSize: 100,
x: '$canvasStartX+30’,
y: `$dataset.0.set.${index}.ENDY-20`
});
});
}
if (data != nil) {
const graphData = {
chart: {
subcaptionFontSize: '14',
numDivLines: ‘1’,
yAxisMinValue: '0',
yAxisMaxValue: '100',
showYAxisValues: '0',
paletteColors: ‘red’,
useDataPlotColorForLabels: '1',
showPercentInTooltip: '0',
divLineAlpha: '0',
},
data: [
jsonTextValues
],
annotations: {
showBelow: '0',
autoScale: '1',
groups: [{
id: 'user-images',
items: [
jsonAnnotations
]
}]
}
};
}