I am a UX professional. Currently, I am capable of using JS code to call ECharts within Axure to display charts. However, I am now facing an issue.
Previously, I hard - coded the data in the JS code, but now I want to retrieve data from a repeater. After consulting AI and conducting multiple ,troubleshooting sessions, I have finally pinpointed the problem to the following code:
var repeater = $axure.repeater.getRepeaterByName(‘Label2’);
var dataRows = repeater.getDataItems();
var titleText = dataRows[0].value;
When I use F12 to debug the web page, it indicates that the ‘getRepeaterByName’ function cannot be found. I have difficulty understanding the official API documentation, and the official support has informed me that custom JS is not supported. I’m currently stuck at this point. Could any experienced tech experts in the community help me take a look?
The following is the complete JS code:
javascript:
$axure.utils.loadJS(‘https://registry.npmmirror.com/echarts/5.5.1/files/dist/echarts.min.js’);
setTimeout(function(){
var dom = $(‘[data-label=Demo]’).get(0);
var Chart = echarts.init(dom);
var repeater = $axure.repeater.getRepeaterByName(‘Label2’);
var dataRows = repeater.getDataItems();
var titleText = dataRows[0].value;
var option = {
title: {
text: titleText,
subtext: ‘Fake Data’,
left: ‘center’
},
tooltip: {
trigger: ‘item’
},
legend: {
orient: ‘vertical’,
left: ‘left’
},
series: [
{
name: ‘Access From’,
type: ‘pie’,
radius: ‘50%’,
data: [
{ value: 1048, name: ‘Search Engine’ },
{ value: 735, name: ‘Direct’ },
{ value: 580, name: ‘Email’ },
{ value: 484, name: ‘Union Ads’ },
{ value: 300, name: ‘Video Ads’ }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: ‘rgba(0, 0, 0, 0.5)’
}
}
}
]
};
if (option && typeof option === “object”){
Chart.setOption(option, true);
}}, 2000);
