Tableau pas au format correct en Javascript pour être utilisé par HighChart
-
25-10-2019 - |
Question
Salut je passe un objet de la liste de mon contrôleur Javascript où il est replacée dans un tableau et utilisé comme source de données pour HighChart graphique à barres.
Dans mon code ci-dessous si je commente de retour dans les données brutes qu'il fonctionne. Si j'utilise ma variable de tableau appelé « résultat » Je ne reçois rien
Si l'étape I dans Javascript avec le débogueur et le résultat de sortie à la fenêtre immédiate, il ressemble à:
? Result [0] {...} [0]: "2" [1]: {...}
? Result [0] [1] {...} [0]: 0 [dix [2]: 0 [3]: 0 [4]: 0 [5]: 0 [6]: 1 [7]: 0 [8]: 0 [9]: 0 [10]: 0 [11]: 0
VOICI LE CODE:
function CreateChart3(surl) {
// Code block for fetching Array as jsonResult (js)
var url = $("#AbsolutePath").val() + "Complaint.mvc/GetChartData_MonthlyByType/" + surl;
var chart;
$.getJSON(url, null, function(data) {
var result = [];
jQuery.each(data, function(i, val) {
result[i] = [val.Type, val.Count];
});
// var seriesData = [];
// for (var i = 0; i < result.length; i++) {
// seriesData.push({ data: result[i][1] ,name: result[i][0]});
// }
debugger;
chart = new Highcharts.Chart({
chart: {
renderTo: 'chart3',
defaultSeriesType: 'column',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Stacked Bar Monthly By Type'
},
yAxis: {
min: 0,
title: {
text: 'Total No Of Complaints'
},
xAxis: {
categories: ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'],
title: 'Month'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function() {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
// series:
// [{
// name: "2",
// data: [0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0]
// }, {
// name: "3",
// data: [1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 3, 0]
// }]
series: [{
data: result
}]
});
});
};
EXTRAITS DE CODE DE COMMANDE EN CAS CONTRIBUE ......
var qry = from i in _db.Complaints
where i.Site.SiteDescription.Contains(searchTextSite)
&& (i.Raised >= startDate && i.Raised <= endDate)
group i by i.ComplaintNatureTypeId.ToString()
into grp
select new
{
Type = grp.Key,
Count = new int[] {
grp.Where(c => c.Raised.Month == 1).Count(),
grp.Where(c => c.Raised.Month == 2).Count(),
grp.Where(c => c.Raised.Month == 3).Count(),
grp.Where(c => c.Raised.Month == 4).Count(),
grp.Where(c => c.Raised.Month == 5).Count(),
grp.Where(c => c.Raised.Month == 6).Count(),
grp.Where(c => c.Raised.Month == 7).Count(),
grp.Where(c => c.Raised.Month == 8).Count(),
grp.Where(c => c.Raised.Month == 9).Count() ,
grp.Where(c => c.Raised.Month == 10).Count() ,
grp.Where(c => c.Raised.Month == 11).Count(),
grp.Where(c => c.Raised.Month == 12).Count() }
};
return Json(qry.ToArray(), JsonRequestBehavior.AllowGet);
La solution
Si je me souviens bien data
de series
est un tableau de
- y valeurs
- paire de valeurs x-y
- point objets
Si je comprends tous les éléments de votre tableau est un tableau où l'élément [0] est name
et élément [1] est un tableau de valeurs y. Vous avez donc un certain nombre de séries. Vous devez vous convertir manuellement dans résultat que tableau d'objets { name: ..., data: ...}
et le transmettre au constructeur de Highcharts. Utilisation boucle for
:
var seriesData = [];
for (var i = 0; i < result.length; i++){
seriesData.push({ name: result[i][0], data: result[i][1] });
}
Et les données de la série utilisation comme:
series: seriesData
Autres conseils
En regardant la sortie du débogueur JSON est pas ce que vous attendez.
Difficile à dire pour certain mais vous restituer l'objet correct du contrôleur? On dirait que vous retournez qry
lorsque vous devez utiliser grp
.