chart.jsにダイナミックデータセットを追加

Question

グラフのグラフを動的にグラフに追加しようとしていますが、私が持っているデータセットの数がわかりません これで2日間私は頭を悩ませました。 ..

私が年、月と値を含むリストを持っている：

public int Month { get; set; } 
    public int Year { get; set; } 
    public int Value { get; set; } 

私のHTMLは、チャートのためだけのキャンバスです：

<div> 
<canvas id="myChart"> </canvas> 
</div> 

私はこのようなチャートを移入：

var dataList = []; 
    var lableList = []; 
    @foreach (var dataInput in Model.TurnoverByReservation) 
    { 

     @:dataList.push("@dataInput.Value"); 
     @:lableList.push("@dataInput.MonthName"); 
    } 

    var ctx = document.getElementById("myChart"); 
    var myChart = new Chart(ctx, { 
     type: 'line', 
     data: { 
      labels: lableList, 
      datasets: [ 
       { 
        label: 'Booking value', 
        data: dataList, 
        backgroundColor: backgroundColors, 
        borderColor: borderColors, 
        borderWidth: 1 
       } 
      ] 
     }, 
     options: { 
      scales: { 
       yAxes: [ 
        { 
         ticks: { 
          beginAtZero: true, 
          callback: function(value, index, values) { 
           if (parseInt(value) >= 1000) { 
            return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); 
           } else { 
            return value; 
           } 
          } 
         } 
        } 
       ] 
      } 
     } 
    }); 

質問は次のとおりです。どのように私はこのようなものを使用することができるようにグラフに別のデータセットを追加することができますか？

@foreach (var year in Model.TurnoverByReservation.OrderBy(x =>x.Month).GroupBy(x => x.Year)) 
{ 
foreach (var value in year) 
{ 
    //Add the value to the dataset, somehow... 
} 
} 

Answer 1

あなたもmyChart.config.dataに格納された配列datasetsを編集してnew Chart()関数を呼び出した後、あなたはいつでもあなたのデータセットの配列を移入することができます。あなたはあなたのチャートを開始してください

// For every year in your data ... 
for (year in model) { 
    // You create a new dataset with empty values and the year as the label 
    var newDataset = { 
     label: year, 
     data: [] 
    }; 

    // For every value for this specific year .. 
    for (value in model[year]) { 
     // You populate the newly created dataset 
     newDataset.data.push(model[year][value]); 
    } 

    // Then you add the dataset to the charts' ones 
    myChart.config.data.datasets.push(newDataset); 
} 

// Finally, make sure you update your chart, to get the result on your screen 
myChart.update(); 

を：

あなたはそれにあなたのクエリから

var model = { 
    2015: [20, 12, 32, 8, 25, 14, 20, 12, 32, 8, 25, 14], 
    2016: [17, 26, 21, 41, 8, 23, 17, 26, 21, 41, 8, 23], 
    2017: [23, 15, 8, 24, 38, 20, 23, 15, 8, 24, 38, 20] 
}; 

あなたのループをこのような何かを取得しましょう、そしてあなたの新しいデータセットにあなたが持っているすべてのデータを保存します

var myChart = new Chart(ctx, { 
    type: 'line', 
    data: { 
     // You need as much labels as the number of values you have 
     labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], 
     // This makes sure you'll get something with `myChart.config.data.datasets` 
     datasets: [] 
    } 
}); 

---

：少なくとも以下で

モデル構造が異なる場合でも、ループを少しでも変更して機能させることができます。

結果を確認するには、デフォルトデータをthis fiddleにします。

Answer 2

これが答えてくれてありがとう、それはPERFEKTに動作します:)私は、コードを変更することができますどのように説明していただけますと、すべての援助

var borderColors = [ 
    'rgba(255,99,132,1)', 
    'rgba(54, 162, 235, 1)', 
    'rgba(255, 206, 86, 1)', 
    'rgba(75, 192, 192, 1)', 
    'rgba(153, 102, 255, 1)', 
    'rgba(255, 159, 64, 1)' 
]; 
var backgroundColors = [ 
    'rgba(255, 99, 132, 0.2)', 
    'rgba(54, 162, 235, 0.2)', 
    'rgba(255, 206, 86, 0.2)', 
    'rgba(75, 192, 192, 0.2)', 
    'rgba(153, 102, 255, 0.2)', 
    'rgba(255, 159, 64, 0.2)' 
]; 
     var ctx = document.getElementById("myChart"); 
    var myChart = new Chart(ctx, { 
     type: 'line', 
     data: { 
      labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], 
      label: "#value", 
      datasets: [] 
     }, 
     options: { 
      scales: { 
       yAxes: [ 
        { 
         ticks: { 
          beginAtZero: true 
         } 
        } 
       ] 
      } 
     } 
    }); 

    @{StringBuilder valueObj = new StringBuilder();} 

    var objModel = new Object(); 

    var myArray = []; 
    @foreach (var years in Model.TurnoverByReservation.OrderBy(x => x.Month).GroupBy(x => x.Year)) 
    { 
     foreach (var value in years) 
     { 
      @:myArray.push("@value.Value"); 
     } 
     @:objModel["@years.Key"] = myArray; 
     @:myArray = []; 
    } 

    var colorInt = 0; //Used to set a variable background and border color 

    for (year in objModel) { 
     // You create a new dataset with empty values and the year as the label 
     var newDataset = { 
      label: year, 
      data: [], 
      backgroundColor: backgroundColors[colorInt], 
      borderColor:borderColors[colorInt] 
     }; 
     colorInt += 1; 
     // For every value for this specific year .. 
     for (value in objModel[year]) { 
      // You populate the newly created dataset 
      newDataset.data.push(objModel[year][value]); 
     } 

     // Then you add the dataset to the charts' ones 
     myChart.config.data.datasets.push(newDataset); 
    } 

    // Finally, make sure you update your chart, to get the result on your screen 
    myChart.update();