Из моего контроллера я возвращаю представление (модель), в котором мои данные хранятся в формате JSON, как описано в документации Js, например,
{"labels":["Januari 2020","Februari 2020","Maart 2020"],
"datasets":[
{"label":"Elektrische keuring - huishoudelijke installatie","backgroundColor":"#FF6AB3","data":[0,0,0]},
{"label":"Elektrische keuring - NIET-huishoudelijke installatie - huishoudelijk type","backgroundColor":"#56179C","data":[0,0,0]},
{"label":"Elektrische keuring - NIET-huishoudelijke installatie","backgroundColor":"#C47F8D","data":[0,0,0]}
]}
Данные, полученные в моем Partialview отлично через
var chartData = @Html.Raw(Model.ChartDataPerInspectionTypeJson);
Теперь мне нужно что-то вроде:
<div id="chart_container">
<canvas id="stackedColumnChartPerYear "></canvas>
</div>
<script type="text/javascript">
var chartData = @Html.Raw(Model.ChartDataPerInspectionTypeJson);
var ctx = document.getElementById('stackedColumnChartPerYear').getContext("2d");
var barChart = new chart(ctx, {
type: 'bar',
data: {
labels: /*here comes xAxis data.. For a quarter it will be 3 values eg: Januari, Februari and Maart...For a year it will be 12 obviously*/
datsets: [{
label: //Here i need the labels received in my chartData from the Model.ChartDataPerInspectionTypeJson;;;The name of Inspection Type
backgroudColor: //Here i need the backgroudColor received in my chartData from the Model.ChartDataPerInspectionTypeJson
data: //Here i need the data received in my chartData from the Model.ChartDataPerInspectionTypeJson
}] /* 1dataset = 1segment = 1color in a stacked bar, where one stacked bar will have 22 different types of inspections, represented with 22 different colors; I have 22 datasets coming from Model.ChartDataPerInspectionTypeJson*/
},
options: {
responsive: true,
maintainAspectRatio: false,
scaleShowValues: true,
scales: {
xAxes: [{
ticks: {
autoSkip: false
},
stacked: true
}],
yAxes: [{
ticks: {
beginAtZero: true
},
stacked: true
}]
}
}
});
</script>