如何在刀片视图中使用 JavaScript 中的字符串数组列表？

Question

我有$dates数组，其中包含这些元素2020-07-04, 2020-07-05, 2020-07-05, 2020-07-01 。

我正在使用 Chart.js 将图表查看到我的视图中。 所以我想将此数组插入到labels中。

我使用@json($dates2, JSON_PRETTY_PRINT)但问题是所有元素都显示在第一列中（如下图所示）。

这是我的代码：

@php ($dates = [])
    @php ($dates2 = [])

    @foreach ($samples as $sample)
        <p class="hide">{{ $date = substr($sample->created_at,0,10)}}</p>
        @php ($dates[] =$date)
    @endforeach
    <p>My array:</p>
    <p>{{ $dates2 = implode(', ', $dates) }}</p>
    <script>
        new Chart(document.getElementById("line-chart"), {
        type: 'line',
        data: {
            // labels:  [{{ implode(', ', $dates) }}],
            labels:  [@json($dates2, JSON_PRETTY_PRINT)],
            datasets: [{ 
                data: [86,114,106,106],
                label: "Last 90 Days",
                borderColor: "#3e95cd",
                fill: false
            },
            ]
        },
       });
    </script>

Answer 1

看起来您将标签 json 包装在一组额外的括号[]中。

假设dates2是一个普通的字符串数组， @json模板指令将 output 看起来像这样：

["2020-07-04","2020-07-05","2020-07-05","2020-07-01"]

这意味着您应该将标签更改为：

labels:  @json($dates2, JSON_PRETTY_PRINT),

您可以通过查看页面的实际 HTML 源代码来验证这一点。 output 应如下所示：

labels: ["2020-07-04","2020-07-05","2020-07-05","2020-07-01"]