Question

我有一个简单的图表（使用Chartist，但这与我的问题无关）。我到现在为它加载了数据，如下所示：

 <script>
        (function () {
            if ($('#ChartistDebtChart').get(0)) {
                var options = {                    };

                new Chartist.Line('#ChartistDebtChart', {
                     labels: [@Html.Raw(String.Join(", ", Model.Debt.BalanceOverTime.Select(c=> @"'" + c.Item1 + @"'").ToList()))],
                    series: [
                         [@Html.Raw(String.Join(", ", Model.Debt.BalanceOverTime.Select(c=>  ((int)c.Item2)).ToList()))],
                    ]
                }, options);
            }
        })();

        </script>

这将呈现如下内容：

 new Chartist.Line('#ChartistDebtChart', {
                     labels: ['13-02-2018', '16-03-2018', '13-04-2018', '13-04-2018'],
                    series: [
                         [9000, 9056, 9156, 9256],
                    ]
                }, options);

哪种方法很完美！

但是，如果我从后端获取数据的话也是如此。我将使用jQuery从我们的控制器执行GET。当我们编写此数据时，'13-02-2018', '16-03-2018', '13-04-2018', '13-04-2018'不会被视为HTML，并且数据不会显示在图表中。

所以我的问题是：在jQuery中使用GET时，如何获取后端字符串被视为HTML？

我尝试了以下内容：

尝试1：在列表中使用地图：

  new Chartist.Line('#DebtDeteriorationGraph', {
                labels: [result.DebtDeteriorationOverTime.map(item => item.Item1).join(", ")],
                series: [
                    ['70000','55000','45000','30000','25000','20000']
                ]
            }, options);

硬编码y值使其变得简单，我尝试result.DebtDeteriorationOverTime.map(item => item.Item1).join(", ")，它被视为一个字符串而不是多个。

尝试2：从服务器提供确切的字符串：

我创建了一个完全符合它的字符串（'13-02-2018', '16-03-2018', '13-04-2018', '13-04-2018'），并将其插入如下：

  new Chartist.Line('#DebtDeteriorationGraph', {
                    labels: [result.DebtDeteriorationOverTimeLabelString],
                    series: [
                        ['70000','55000','45000','30000','25000','20000']
                    ]
                }, options);

这也被视为＆＃34; 1项＆＃34;在x轴上。

尝试3：从服务器获取字符串并尝试解析为HTML

var htmlRes = $('<div/>').html(result.DebtDeteriorationOverTimeLabelString).text();
                    new Chartist.Line('#DebtDeteriorationGraph', {
                        labels: [htmlRes],
                        series: [
                            ['70000','55000','45000','30000','25000','20000']
                        ]
                    }, options);

所有3次尝试都被视为一个字符串，因此，与我从C＃运行Html.Raw()时的效果不同。

有什么想法吗？： - ）

Answer 1

您正在尝试将您的回复视为“HTML”，但您并不需要这样做。 labels是javascript数组（字符串），所以你需要javascript数组，其中每个项代表一个标签。最接近的是这次尝试：

labels: [result.DebtDeteriorationOverTime.map(item => item.Item1).join(", ")]

生成带有一个字符串的javascript数组。相反，你需要：

labels: result.DebtDeteriorationOverTime.map(item => item.Item1)

因为DebtDeteriorationOverTime已经是数组，而不是你需要的数组，所以你使用map来生成你需要的数组。无需加入任何内容或将任何内容包含在[]。

中

请注意，您还可以从api返回表示图表信息（包含labels和series属性）的整个json对象。然后你可以这样做：

new Chartist.Line('#ChartistDebtChart', result.chartData, options);

在jQuery中将字符串从服务器转换为HTML：相当于Html.Raw（）？

1 个答案: