将动态数据集添加到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

回答

相关问题