ASP.NET Core Razor 页面 - 获取要在 Chart.js 图表上显示的列表数据答案

【问题标题】：ASP.NET Core Razor Pages - Get List Data to Display on Chart.js GraphASP.NET Core Razor 页面 - 获取要在 Chart.js 图表上显示的列表数据
【发布时间】：2020-04-03 21:14:21
【问题描述】：

我有一个已填充的列表 (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());

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

【问题讨论】：

标签： javascript c# chart.js razor-pages asp.net-core-3.1

【解决方案1】：

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

以下是我所做的示例。

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

【讨论】：