使用字符串列表作为 Chart.js 标签

Question

我需要创建一个包含两个列表的图表。

List<string> islemYapanOperatorler = new List<string>();
    List<int> interventionCounter = new List<int>();
        foreach (var item in itemList)
    {
        string Normalize = item.Key;
        for (int i = 0; i < turkishChars.Length; i++)
            Normalize = Normalize.Replace(turkishChars[i], englishChars[i]);
        islemYapanOperatorler.Add(Normalize);
        foreach (var item2 in item)
        {
            interventionCount++;
        }
        interventionCounter.Add(interventionCount);
        interventionCount = 0;
        operatorCount++;
    }

islemYapanOperatorler 列表正在创建标签部分，interventioncounter 列表正在为 Chart.Js 创建数据部分。

和下面 Chart.js 的 javascript 代码：（有点懒，但它给出了我想要的结果。）

        const myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels:
               ['@islemYapanOperatorler[0]', '@islemYapanOperatorler[1]', '@islemYapanOperatorler[2]', '@islemYapanOperatorler[3]', '@islemYapanOperatorler[4]', '@islemYapanOperatorler[5]', '@islemYapanOperatorler[6]', '@islemYapanOperatorler[7]', '@islemYapanOperatorler[8]', '@islemYapanOperatorler[9]', '@islemYapanOperatorler[10]']

                ,
            datasets: [{
                label: 'Haftalık',
                data: [@interventionCounter[0], @interventionCounter[1], @interventionCounter[2], @interventionCounter[3], @interventionCounter[4], @interventionCounter[5], @interventionCounter[6], @interventionCounter[7], @interventionCounter[8], @interventionCounter[9], @interventionCounter[10]],
                backgroundColor: [

                    'rgba(0, 26, 190, 0.8)'
                ],
                borderColor: [

                    'rgba(0, 26, 190, 1)'
                ],
                borderWidth: 1
            }

            ]
        },
        options: {
            tooltips: {
                callbacks: {
                    label: function (tooltipItem, data) {
                        return data['labels'][tooltipItem['index']] + ': ' + data['datasets'][0]['data'][tooltipItem['index']] ;
                    }
                }
            },

            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });

它工作正常，给出了我想要的结果。（下图）

但是，如你所见

它适用于 11 个索引，但索引的数量可能会有所不同。在这种情况下，要么不显示第 12 个索引中的数据，因为它被定义为常量 11 索引，要么失败，因为第 11 个索引为空。

我该如何解决这个问题？感谢您的任何建议。

Answer 1

经过深入研究：

    var model = @Html.Raw(Json.Serialize(interventionCounter));
    var monthlyData = [];
    $.each(model, function (index, item) {
        monthlyData .push(item.toString());
    });

然后在 Chartjs 脚本中：

data: monthlyData,

解决了我的问题。我标记这个答案是为了以后能帮助到其他人。

使用字符串列表作为 Chart.js 标签

Using string list as Chart.js label

javascript

asp.net-mvc-3

chart.js