將動態數據集添加到chart.js

我試圖動態地將一行添加到chart.js圖表，我不知道我有多少個數據集現在我已經在這個問題上敲了兩天了。 ..將動態數據集添加到chart.js

我有一個包含年份，月份和值的列表：

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... 
} 
}

來源

2017-01-23 Marcus Ohlsson

，你甚至可以通過編輯存儲在myChart.config.data陣列datasets調用new Chart()功能後填充，只要你想你的數據集陣列。

比方說，你從查詢得到這樣的

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] 
};

你環路成這樣了，你有充分的數據存儲在您的新數據集：

// 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 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中的默認數據檢查結果。

來源

2017-01-23 12:13:10 tektiv

tektiv你好，謝謝你的回答，它的工作原理PERFEKT :)能否請您解釋我如何可以修改代碼所以它適用於來自mvc模型的數據？像這樣的： @foreach（VAR年在Model.TurnoverByReservation.OrderBy（X => x.Month）.GroupBy（X => x.Year）） { 的foreach（在年VAR值） { //將值添加到數據集 } } –

@MarcusOhlsson我不習慣MVC，特別是.net的，雖然我不知道循環導入數據的確切語法。但我確定它與循環中的內容沒有什麼不同。我想你需要用'@foreach（Model.Turnover中的var年）...'來改變'for（year in model）'' – tektiv

我找到了解決問題的方法:)我用完整的代碼更新了問題 –

這是最後的和工作方案，非常感謝@tektiv所有援助

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();

來源

2017-01-23 15:25:27

將動態數據集添加到chart.js

回答

相關問題