来自 ViewBag 的标签值的 ChartJs Uncaught ReferenceError

Question

我正在努力以正确的格式通过 ViewBag 传递 csv 字符串。

我知道结果应该像 ["Blue","Brown","Green"] 但我的脚本生成为 [Blue,Brown,Green]。

然后我得到 Uncaught ReferenceError : Blue is not defined.

如何在我的控制器中格式化它以正确的方式传递？

这是我在控制器中的代码

public ActionResult Index()
    {

        List<string> teamsList = new List<string>();
        List<string> salesCount = new List<string>();            

        foreach (var team in Db.Teams)
        {
            teamsList.Add(team.Name);
            int count = Db.LeadCampaigns.Count(i => Db.Agents.FirstOrDefault(a => a.AgentId == i.AgentId).TeamId == team.TeamId && i.LeadStatusId == Db.LeadStatuses.FirstOrDefault(s => s.Name == "SALE").LeadStatusId);
            salesCount.Add(count.ToString());
        }

        ViewBag.SaleCount_List = string.Join(",", salesCount);

        ViewBag.TeamName_List = string.Join(",", teamsList);

        return View();
    }

这是我在视图中的脚本。

<script>


var barChartData =
{
    labels: [@Html.Raw(ViewBag.TeamName_List)],
    datasets: [{
    label: 'TeamWise Sales Count',
    backgroundColor: [
    "#f990a7",
    "#aad2ed",
    "#9966FF",
    "#99e5e5",
    "#f7bd83",
    ],
    borderWidth: 2,
    data: [@ViewBag.SaleCount_List]
    }]
};


window.onload = function () {

    var ctx1 = document.getElementById("barcanvas").getContext("2d");
    window.myBar = new Chart(ctx1,
        {
            type: 'bar',
            data: barChartData,
            options:
            {
                title:
                {
                    display: true,
                    text: "TeamWise Sales Count"
                },
                responsive: true,
                maintainAspectRatio: true
            }
        });
}

Answer 1

您的插件需要一个值数组，但您使用 String.Join() 向它传递了一个 string。

使用

传递数组

ViewBag.SaleCount_List = salesCount;
ViewBag.TeamName_List = teamsList;

（或更好地传递具有 2 个 IEnumerable<string> 属性的视图模型），然后将其转换为 jacascript 数组

var saleCounts = @Html.Raw(Json.Encode(ViewBag.SaleCount_List))
var teamNames = @Html.Raw(Json.Encode(ViewBag.TeamName_List))
var barChartData =
{
    labels: teamNames,
    datasets: [{
        ....
    ],
    borderWidth: 2,
    data: saleCounts
    }]
};

Answer 2

使用您当前的语法：

    const string quote = "\"";
    foreach (var team in Db.Teams)
    {
        teamsList.Add(quote + team.Name + quote);
        int count = Db.LeadCampaigns.Count(i => Db.Agents.FirstOrDefault(a => a.AgentId == i.AgentId).TeamId == team.TeamId && i.LeadStatusId == Db.LeadStatuses.FirstOrDefault(s => s.Name == "SALE").LeadStatusId);
        salesCount.Add(count.ToString());
    }

来自 ViewBag 的标签值的 ChartJs Uncaught ReferenceError

ChartJs Uncaught ReferenceError for labels value from ViewBag

csv

asp.net-mvc

viewbag

chart.js