Создание StackedBarChart с использованием библиотеки Chart JS в Asp. Net MVC - PullRequest
0 голосов
/ 22 января 2020

Из моего контроллера я возвращаю представление (модель), в котором мои данные хранятся в формате 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...