我有一个动态arr
的对象数组,它产生以下结果:
{value:0, name:'Safety'},{value:0, name:'Environmental'},{value:0, name:'Finance'},{value:0, name:'Health'},{value:1, name:'Quality'}
我想在以下 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'}]
}
]
但是,当我使用时,data: [arr]
没有显示图表。但是,如果我粘贴原始数组输出,它就可以工作。
有什么办法可以解决这个问题?
编辑:调试器结果如下:
["{value:0, name:'Safety'}", "{value:0, name:'Environmental'}", "{value:0, name:'Finance'}", 2 more...]
当我alert(arr)
显示时,它没有双引号。
编辑 2. 下面的完整代码
<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>
这是结果:
谢谢。
解决了
用户@AshishMalhotra 在下面的评论中给出了正确答案
代替
var item = "{value:" + parseInt(data.value[i]) + ",name:'" + data.name[i] + "'}";
和
var item = {value: data.value[i] ,name:data.name[i]};