C＃MVC5動的に表示されたChart.jsを表示しない

Question

chart.jsライブラリのチャートを自分のビューに実装しようとしています。しかし、私は望むようにグラフを表示することができません。

私のかみそりビュー内の特定の部分：折れ線グラフについて

<div class="col-md-8"> 
      <p class="text-center"> 
      <strong>Energy Consumption and Production: 1 Jan, 2016 - 30 Jul, 2016</strong> 
      </p> 
      <div class="chart-responsive"> 
      <canvas id="trendChart" width="800" height="400"></canvas> 
      </div> @*/.chart-responsive*@ 

マイJavascriptコード：

$(function() { 

var datachart = { 
    labels: [], 
    datasets: [ 
     { 
      label: "Consumption", 
      backgroundColor: "rgba(215,220,67,0.3)", 
      borderColor: "rgba(220,220,220,0.7)", 
      borderWidth: 1, 
      hoverBackgroundColor: "rgba(220,220,220,1)", 
      hoverBorderColor: "rgba(220,220,220,0.5)", 
      data: [] 
     }, 
     { 
      label: "Production", 
      backgroundColor: "rgba(90,193,208,0.3)", 
      borderColor: "rgba(151,187,205,0.7)", 
      borderWidth: 1, 
      hoverBackgroundColor: "rgba(151,187,205,1)", 
      hoverBorderColor: "rgba(151,187,205,0.5)", 
      data: [] 
     } 
    ] 
}; 

var trendChartOptions = { 
    //Boolean - If we should show the scale at all 
    showScale: true, 
    //Boolean - Whether grid lines are shown across the chart 
    scaleShowGridLines: false, 
    //String - Colour of the grid lines 
    scaleGridLineColor: "rgba(0,0,0,.05)", 
    //Number - Width of the grid lines 
    scaleGridLineWidth: 1, 
    //Boolean - Whether to show horizontal lines (except X axis) 
    scaleShowHorizontalLines: true, 
    //Boolean - Whether to show vertical lines (except Y axis) 
    scaleShowVerticalLines: true, 
    //Boolean - Whether the line is curved between points 
    bezierCurve: true, 
    //Number - Tension of the bezier curve between points 
    bezierCurveTension: 0.3, 
    //Boolean - Whether to show a dot for each point 
    pointDot: false, 
    //Number - Radius of each point dot in pixels 
    pointDotRadius: 4, 
    //Number - Pixel width of point dot stroke 
    pointDotStrokeWidth: 1, 
    //Number - amount extra to add to the radius to cater for hit detection outside the drawn point 
    pointHitDetectionRadius: 20, 
    //Boolean - Whether to show a stroke for datasets 
    datasetStroke: true, 
    //Number - Pixel width of dataset stroke 
    datasetStrokeWidth: 2, 
    //Boolean - Whether to fill the dataset with a color 
    datasetFill: true, 
    //String - A legend template 
    legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].lineColor%>\"></span><%=datasets[i].label%></li><%}%></ul>", 
    //Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container 
    maintainAspectRatio: false, 
    multiTooltipTemplate: "<%= datasetLabel %> - <%= value %>", 
    //Boolean - whether to make the chart responsive to window resizing 
    responsive: true 
}; 

$.getJSON("/AdminLte/GetData", function (data) { 
    $.each(data, function (i, item) { 
     datachart.labels.push(item._DATE); 
     datachart.datasets[0].data.push(item.CONSUMPTION); 
     datachart.datasets[1].data.push(item.PRODUCTION); 
    }) 
}); 
var ctx = new Chart(document.getElementById("trendChart").getContext("2d")).Line(datachart, trendChartOptions); 

}）。

、動的にデータを埋めるための私のコントローラメソッド：

public ContentResult GetData() 
     { 
      List<MeterDataTrendViewModel> meterDataTrend = new List<MeterDataTrendViewModel>(); 
      var result = 
      from s in db.MeterDatas.ToList() 
      group s by new { s._DATE } into g 
      select new 
       { 
       read_date = g.Key._DATE, 
       CONSUMPTION = g.Sum(x => Convert.ToInt64(x.CONSUMPTION)), 
       PRODUCTION = g.Sum(x => Convert.ToInt64(x.PRODUCTION)) 
       }; 
      foreach(var res in result) 
      { 
       MeterDataTrendViewModel mdv = new MeterDataTrendViewModel(); 
       mdv._DATE = res.read_date; 
       mdv.CONSUMPTION = res.CONSUMPTION.ToString(); 
       mdv.PRODUCTION = res.PRODUCTION.ToString(); 
       meterDataTrend.Add(mdv); 
      } 

      return Content(JsonConvert.SerializeObject(meterDataTrend), "application/json"); 
     } 

I`veはすでに私のjsのコードをデバッグし、データおよびラベルの配列は私のコントローラのアクションが呼び出される正しくため、満たされています。しかし、datetime文字列が1つだけ縦に表示されるので、おそらくy軸に位置合わせされていると思いますか？

グラフを静的データで埋めて、正しく表示することもできます。なぜ私の動的データが正しい方法で表示されていないのか理解できません。

Answer 1

私はこの問題を以下の変更を加えて自分で解決することができました。

$.getJSON("/AdminLte/GetData", function (data) { 
      $.each(data, function (i, item) { 
       chartlabels[i] = item._DATE; 
       cons[i] = item.CONSUMPTION; 
       prod[i] = item.PRODUCTION; 
      }) 
      var ctx = new Chart(document.getElementById("trendChart").getContext("2d")).Line(datachart, trendChartOptions); 
     }); 
    });