Добавление динамического массива в данные серии круговых диаграмм ECharts
У меня динамический массив 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]};
3 ответа
Правильный ответ, данный пользователем @AshishMalhotra в комментариях
замещать
var item = "{value:" + parseInt(data.value[i]) + ",name:'" + data.name[i] + "'}";
с
var item = {value: data.value[i] ,name:data.name[i]};
Попробуйте заменить
data: [arr]
с
data: arr
Поскольку arr сам по себе является массивом, arr = [{value:0, name:'Safety'},{value:0, name:'Environmental'},{value:0, name:'Finance'},{value:0, имя: "Здоровье"}, {значение:1, имя: "Качество"}].
Это означает, что ваше свойство данных в настоящее время настроено на чтение [[{value:0, name:'Safety'},{value:0, name:'Environmental'},{value:0, name:'Finance'},{ значение: 0, имя: "Здоровье"}, {значение:1, имя: "Качество"}]] или массив с одним значением, которое является обр.
Привет, надеюсь, это поможет вам:
попробуйте сначала построить данные и ряд данных как:
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
}]
});
Это работает для меня.