admin管理员组文章数量:1313759
I have a dynamic array arr of objects that produces the following result:
{value:0, name:'Safety'},{value:0, name:'Environmental'},{value:0, name:'Finance'},{value:0, name:'Health'},{value:1, name:'Quality'}
I want to use it in the following JavaScript:
series: [
{
name: 'Pie Chart',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: [arr]
//data: [{value:0, name:'Safety'},{value:0, name:'Environmental'},{value:0, name:'Finance'},{value:0, name:'Health'},{value:1, name:'Quality'}]
}
]
However, when I use the data: [arr] no chart is shown. But if I paste the raw array output it works.
Any way to resolve this?
Edit: debugger results below:
["{value:0, name:'Safety'}", "{value:0, name:'Environmental'}", "{value:0, name:'Finance'}", 2 more...]
When I alert(arr) it is shown without the double quotes.
Edit 2. Full code below
<script type="text/javascript">
window.onload = function () {
$.ajax({
dataType: "json",
url: "/Home/GetDataPie",
type: "POST",
data: JSON,
success: function (data) {
PieChart(data);
},
error: function () {
alert("err!");
}
});
}
function PieChart(data) {
var arr = [];
var arrayLength = data.value.length;
for (var i = 0; i < arrayLength; i++) {
var item = "{value:" + parseInt(data.value[i]) + ",name:'" + data.name[i] + "'}";
arr.push(item);
}
//shows correct array list
//alert(arr);
var myChart = echarts.init(document.getElementById('main'));
option = {
title: {
text: 'My Chart',
subtext: '',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'left',
data: data.name
},
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: true },
magicType: {
show: true,
type: ['pie'],
option: {
funnel: {
x: '25%',
width: '50%',
funnelAlign: 'left',
max: 1548
}
}
},
restore: { show: true },
saveAsImage: { show: true }
}
},
calculable: false,
series: [
{
name: 'Pie Chart',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: arr
}
]
};
myChart.setOption(option);
}
</script>
This is the result:
Thanks.
Solved
Correct answer given by user @AshishMalhotra in ments below
Replace
var item = "{value:" + parseInt(data.value[i]) + ",name:'" + data.name[i] + "'}";
with
var item = {value: data.value[i] ,name:data.name[i]};
I have a dynamic array arr of objects that produces the following result:
{value:0, name:'Safety'},{value:0, name:'Environmental'},{value:0, name:'Finance'},{value:0, name:'Health'},{value:1, name:'Quality'}
I want to use it in the following JavaScript:
series: [
{
name: 'Pie Chart',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: [arr]
//data: [{value:0, name:'Safety'},{value:0, name:'Environmental'},{value:0, name:'Finance'},{value:0, name:'Health'},{value:1, name:'Quality'}]
}
]
However, when I use the data: [arr] no chart is shown. But if I paste the raw array output it works.
Any way to resolve this?
Edit: debugger results below:
["{value:0, name:'Safety'}", "{value:0, name:'Environmental'}", "{value:0, name:'Finance'}", 2 more...]
When I alert(arr) it is shown without the double quotes.
Edit 2. Full code below
<script type="text/javascript">
window.onload = function () {
$.ajax({
dataType: "json",
url: "/Home/GetDataPie",
type: "POST",
data: JSON,
success: function (data) {
PieChart(data);
},
error: function () {
alert("err!");
}
});
}
function PieChart(data) {
var arr = [];
var arrayLength = data.value.length;
for (var i = 0; i < arrayLength; i++) {
var item = "{value:" + parseInt(data.value[i]) + ",name:'" + data.name[i] + "'}";
arr.push(item);
}
//shows correct array list
//alert(arr);
var myChart = echarts.init(document.getElementById('main'));
option = {
title: {
text: 'My Chart',
subtext: '',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'left',
data: data.name
},
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: true },
magicType: {
show: true,
type: ['pie'],
option: {
funnel: {
x: '25%',
width: '50%',
funnelAlign: 'left',
max: 1548
}
}
},
restore: { show: true },
saveAsImage: { show: true }
}
},
calculable: false,
series: [
{
name: 'Pie Chart',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: arr
}
]
};
myChart.setOption(option);
}
</script>
This is the result:
Thanks.
Solved
Correct answer given by user @AshishMalhotra in ments below
Replace
var item = "{value:" + parseInt(data.value[i]) + ",name:'" + data.name[i] + "'}";
with
var item = {value: data.value[i] ,name:data.name[i]};
3 Answers
Reset to default 4Correct answer given by user @AshishMalhotra in ments
Replace
var item = "{value:" + parseInt(data.value[i]) + ",name:'" + data.name[i] + "'}";
with
var item = {value: data.value[i] ,name:data.name[i]};
Try replacing
data: [arr]
with
data: arr
Since arr is itself an array, arr = [{value:0, name:'Safety'},{value:0, name:'Environmental'},{value:0, name:'Finance'},{value:0, name:'Health'},{value:1, name:'Quality'}].
That means that your data property is currently set to read [[{value:0, name:'Safety'},{value:0, name:'Environmental'},{value:0, name:'Finance'},{value:0, name:'Health'},{value:1, name:'Quality'}]], or an array with one value, which is arr.
Hi I hope this will help you:
try building the data and data series first as:
try building the data for legend and data series first as:
var groupChartData=[];
var groupEmployeeDataSeries=[];
// build from dynamic data (json or array)
<for data: datalist>
groupChartData.push(data.name);
groupEmployeeDataSeries.push({value:data.value,name:data.name+"("+ data.value+")"});
</for>
echartPie.setOption({
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
x: 'center',
y: 'bottom',
data: groupChartData
},
toolbox: {
show: true,
feature: {
magicType: {
show: true,
type: ['pie', 'funnel'],
option: {
funnel: {
x: '25%',
width: '50%',
funnelAlign: 'left',
max: 1548
}
}
},
saveAsImage: {
show: true,
title: "Save Distribution"
}
}
},
calculable: true,
series: [{
name: 'Employee Distribution ('+type+' Wise)',
type: 'pie',
radius: '55%',
center: ['50%', '48%'],
data:groupEmployeeDataSeries
}]
});
It is working for me.
本文标签： javascriptAdd dynamic array to ECharts Pie Chart series dataStack Overflow
版权声明：本文标题：javascript - Add dynamic array to ECharts Pie Chart series data - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741927703a2405386.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论