ASP.NET 核心剃须刀页面 - 获取要在图表.js图形上显示的列表数据

Question

我有一个填充的列表(lstObjects(，并试图让这些数据显示在我的Chartist.js图上。当我将 lstObjects 悬停在调试模式下时，我可以看到列表的计数和对象类型。

在我的<script>标签中，我目前有：

var chartOptions = {
showLines: true,
responsive: true,
maintainAspectRatio: false,
legend: {
display: false
},
tooltips: {
displayColors: false
},
scales: {
xAxes: [{
display: true,
ticks: {
fontColor: 'black',
padding: 20
},
gridLines: {
borderDash: [1, 5],
tickMarkLength: 0,
zeroLineBorderDash: [1, 5],
drawBorder: false,
padding: 5
}
}],
yAxes: [{
display: true,
ticks: {
fontColor: 'black',
padding: 20
},
gridLines: {
color: 'rgba(85, 85, 85, 0.5)',
borderDash: [1, 5],
tickMarkLength: 0,
zeroLineBorderDash: [1, 5],
drawBorder: false,
padding: 5
}
}]
}
};
// Total Transactions Chart
var achChart = new Chart(document.getElementById('myChart').getContext('2d'), {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
datasets: [{
label: '',
lineTension: 0,
fill: false,
backgroundColor: 'rgb(25, 255, 102)',
borderColor: 'rgba(25, 255, 102, 0.4)',
borderWidth: 5,
data: [0, 600, 200, 450, 800, 900, 550, 700, 800, 600]
}]
},
options: chartOptions,
});

我希望数据数据执行以下操作：

labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
data: [100, 120, 180, 200, 300, 155, 220, 430, 275, 350, 120, 450]

我知道我需要将列表项转换为字符串，并尝试加入我的 SubmitDate，但我无法让它工作。

var submitDate = string.Join("','", @Model.lstObjects.Select(x => x.RecordMonth).ToList());

有人对我如何完成这项工作有任何建议吗？

Answer 1

我能够使用逗号上的@Html.Raw和String.Join来使其工作。我还添加了刻度线来围绕月份字符串，如'Jan'.

以下是我所做的事情的示例。

data: {
labels: [@Html.Raw("'" + String.Join("','", (Model.lstObjects.Select(x => x.RecordMonth).ToList())) + "'")],