Witam,
Postanowiłem w aplikacji opartej o .NET Core 3.1 wykorzystać bibliotekę highcharts do wizualizacji danych. Jednak utknąłem na prostym przekazaniu danych z widoku do kontrolera.
Mam problem z przekazaniem zgrupowanych danych (w postaci JSON) z metody kontrolera do widoku (skryptu jQurey) .
public IActionResult GetDeals()
{
var deals = _context.Deals
.GroupBy(d => d.Stage)
.Select(g => new { stageName = g.Key, stageTotalAmount = g.Sum(d => d.TotalAmount) }).ToList();
return new JsonResult(new { data = deals });
}
Widok:
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/funnel.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
<p class="highcharts-description">
Chart showing a sales funnel. A funnel chart is often used to visualize
data from stages of a process. Readers can quickly identify bottlenecks
in the process by comparing the area size variation of each stage.
</p>
</figure>
<script>
$(document).ready(function () {
$.getJSON("/Home/GetDeals", function (data) {
var Groups = []
for (var i = 0; i < data.length; i++) {
Groups.push(data[i].stageName);
Groups.push(data[i].stageTotalAmount);
}
alert(Groups);
Highcharts.chart('container', {
chart: {
type: 'funnel'
},
title: {
text: 'Sales funnel'
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '<b>{point.name}</b> ({point.y:,.0f})',
softConnector: true
},
center: ['40%', '50%'],
neckWidth: '30%',
neckHeight: '25%',
width: '80%'
}
},
legend: {
enabled: false
},
series: [{
name: 'Unique users',
data: Groups
//[
// ['Website visits', 15654],
// ['Downloads', 4064],
// ['Requested price list', 1987],
// ['Invoice sent', 976],
// ['Finalized', 846]
//]
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
plotOptions: {
series: {
dataLabels: {
inside: true
},
center: ['50%', '50%'],
width: '100%'
}
}
}
}]
}
});
});
});
</script>
Skrypt działa(dla danych statycznych) jednak nie wiem czy dane poprawnie się zaciągają i nie wiem jak je przekazać w zakomentowane miejsce. Próbowałem zapisać te dane w zmiennej tablicowej Groups jednak nadal nie działa poprawnie.
series: [{
name: 'Unique users',
data: Groups
//[
// ['Website visits', 15654],
// ['Downloads', 4064],
// ['Requested price list', 1987],
// ['Invoice sent', 976],
// ['Finalized', 846]
//]
}],
Może źle przekazuję dane lub problem jest z zapytaniem LINQ?