.NET Core中Chart.js无法正确显示波斯语（法尔西语）图表标签问题求助

我最近在做.NET Core项目的时候碰到个棘手的问题，折腾好久都没解决，来求助各位大佬！

问题是这样的：我用ViewData把数据库里的波斯语（法尔西语）图表标签从控制器传到视图，结果这些标签完全没法正常显示。具体来说，当我用<text>标签把C#里的列表转成JS数组时，波斯语内容居然变成了ASCII格式，导致Chart.js渲染出来的图表标签根本看不懂。

下面是我的代码，麻烦帮我看看哪里出问题了：

控制器代码（C#） #

public IActionResult DisplayChartsProvince()
{
    if ((User.Claims.FirstOrDefault(c => c.Type == "role").Value == "مدیریت") || (User.Claims.FirstOrDefault(c => c.Type == "role").Value == "معاونت فناوری اطلاعات"))
    {
        //نمودار دایره ای
        var data = _context.ProvinceLevel.ToList();
        var roleTitles = _context.Roles.Select(r => r.RoleTitle).ToList();

        List<int> role = new();
        List<string> roleLabels = new();

        for(int i = 0; i < roleTitles.Count; i++)
        {
            int count = data.Where(r => r.role == roleTitles[i]).ToList().Count;
            if(data.Where(r => r.role == roleTitles[i]).ToList().Count > 0)
            {
                roleLabels.Add(roleTitles[i]);
            }
            if (count!=0)
            {
                role.Add(count);
            }
            count = 0;
        }

        ViewData["roleTitles"] = roleLabels;
        ViewData["roleCounts"] = role;

        //////////////////////////////////////////////////////
        return View();
    }
    return View("NotAccessProvince");
}

视图代码（HTML + JS） #

@{
    ViewData["Title"] = "گزارش استان - سطح استان";
    List<string> RoleTitles = ViewData["roleTitles"] as List<string>;
    List<int> RoleCounts = ViewData["roleCounts"] as List<int>;
}

<script src="~/js/chartjs/chart.js"></script>

<div class="btn btn-outline-primary btn-sm my-1 mx-3">گزارش سطح استان</div>
<div class="w-100 d-flex my-2 px-3">
    <div class="card w-100 d-block">
        <div class="card-header text-primary">
            <i class="fa fa-pie-chart" style="background-color:"></i>
        </div>
        <div class="card-body">
            <canvas id="d1" class="chart-canvas mx-auto"></canvas>
        </div>
    </div>
</div>

@section ChartScripts{
<script>
    var chartDataOne = [];
    var chartLabelsOne = [];

    @foreach(var item in RoleCounts)
    {
        <text>chartDataOne.push(@item);</text>
    }

    @foreach(var item in RoleTitles)
    {
        <text>chartLabelsOne.push("@item");</text>
    }

    var colors = ["blue", "yellow", "green", "orange"];
    var ctx = document.getElementById("d1").getContext("2d");

    new Chart(ctx, {
        type: "pie",
        data: {
            labels: chartLabelsOne,
            datasets: [{
                backgroundColor: colors,
                data: chartDataOne
            }]
        },
        options: {
            title: {
                display: true,
                text: "World Wide Wine Production 2018"
            }
        }
    });

    let valuesArray = chartLabelsOne.values();
    for (let item of valuesArray) {
        console.log(item);
    };
</script>
}

简单说，就是原本应该显示的波斯语标签，在页面加载后变成了ASCII格式，Chart.js根本渲染不出正常的文字。有没有办法解决这个编码问题呀？

备注：内容来源于stack exchange，提问作者Ashkan Amjad