在 Morris.js 和 Laravel 5 中循环 JSON 数据

Question

在我的控制器中我做了这样的事情

$responseCounts = json_encode(array_count_values($countArray));
dd($responseCounts);

这会输出以下内容

"{"Answer 4":6,"Answer 2":25,"Answer 3":19,"Answer 1":20}"

现在我正尝试使用这些数据创建一个 Morris.js 图表。在 Javascript 之内，我

<script>
    $(function() {
        var data = '{{ $responseCounts }}';
        data = data.replace(/&quot;/ig,'"');
        data = JSON.parse(data)
        console.log(data);
    });
</script>

当我将数据输出到控制台时，我看到了

Object { Answer 4=6,  Answer 2=25,  Answer 3=19,  more...}

现在我在 Morris 部分，到目前为止我有

Morris.Bar({
    element: 'chart',
    data: [
        { Answers: 'A', Count: 3 },
        { Answers: 'B', Count: 10 },
        { Answers: 'C', Count: 5 },
        { Answers: 'D', Count: 17 }
    ],
    xkey: 'Answers',
    ykeys: ['Count'],
    labels: ['Answers']
});

很明显现在我正在输出假数据。我现在要做的是使用我的数据变量。对象的左侧部分表示 X 轴上的一列。第二部分是每列的计数。所以我基本上想证明答案 1 有 20，答案 2 有 25 等等

我该怎么做呢？

谢谢

Answer 1

因此，对于此任务，您实际上想要使用 {!! $responseCounts !!}，这是一种用于打印未过滤数据的 blade 特定语法。所以你的数据变量需要看起来像：

var data = JSON.parse({!! $responseCounts !!});

下一个问题是您现在拥有的 Object 在一个 object 中包含多个键值对，但是您需要一个定义明确的数组，其中包含具有 2 个键的多个 object值对。

var morrisData = [];

$.each(data, function(key, val){
    morrisData.push({'Answer': key.split('Answer')[1], 'Count' : val}); 
});

现在您将得到一个如下所示的 object：

[
    { 'Answer' : 2, 'Count' : 25 },
    { 'Answer' : 3, 'Count' : 19 }
    { 'Answer' : 4, 'Count' : 6 }
]

等等...

然后您可以简单地调用 Morris 并传递 data:morrisData

Morris.Bar({
    element: 'chart',
    data:morrisData,
    xkey: 'Answers',
    ykeys: ['Count'],
    labels: ['Answers']
});

当然你也可以把objectserver-side改成php，但是我不知道它是怎么构造的，所以我帮不上忙。

在 Morris.js 和 Laravel 5 中循环 JSON 数据

Looping JSON data in Morris.js and Laravel 5

javascript

laravel

morris.js

laravel-5