在.net core的chartjs中显示波斯语字母时出现问题

fafcakar  于 2023-08-05  发布在  Chart.js
关注(0)|答案(1)|浏览(135)

当我用ViewData将数据库信息从控制器传输到视图时,与波斯语中的图表标签相关的信息没有正确显示。事实上,当我将信息从C#列表传输到带有<text>标签的js数组时,信息可以以ASCII传输。请帮帮我
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编码:

@{
    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>
}


必须显示的ViewData的标签:


的数据
此时将显示页面:



存储在chartLabelsOne数组中的ASCII值:

huwehgph

huwehgph1#

HTML编码引擎只会safelist基本的拉丁字母表,扩大字符视为安全的编码器,尝试添加下面的代码到您的Program.cs:

builder.Services.AddSingleton<HtmlEncoder>(HtmlEncoder.Create(allowedRanges: new[] { UnicodeRanges.BasicLatin, UnicodeRanges.Arabic }));

字符串
结果:

相关问题