将动态数据集添加到 chart.js

Question

我正在尝试动态地向 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...
 }
}

Answer 1

您可以随时填充数据集数组，即使在new Chart()通过编辑datasets存储在myChart.config.data.

假设您从查询中得到类似的信息

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: []
    }
});

如果您的模型结构不同，您仍然应该能够稍微更改循环以使其正常工作。

您可以使用此小提琴中的默认数据检查结果。