在我的控制器中我做了类似的事情
$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(/"/ig,'"');
data = JSON.parse(data)
console.log(data);
});
</script>
当我将数据输出到控制台时,我看到了
Object { Answer 4=6, Answer 2=25, Answer 3=19, more...}
现在我在莫里斯部分,到目前为止我已经
了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']
});
显然目前我正在输出假数据。我现在要做的是使用我的数据变量。 Object的左侧部分代表X轴上的一列。第二部分是每列的计数。所以我基本上想表明答案1有20,答案2有25等。
我怎么能这样做?
由于
答案 0 :(得分:3)
因此,对于此任务,您实际上希望使用{!! $responseCounts !!}
这是一个特定于刀片的语法来打印未过滤的数据。那么你的数据变量需要是什么样的:
var data = JSON.parse({!! $responseCounts !!});
下一个问题是你现在拥有的Object在一个对象中包含多个键值对,但是你需要一个定义良好的数组,其中有多个对象具有2个键值对。
var morrisData = [];
$.each(data, function(key, val){
morrisData.push({'Answer': key.split('Answer')[1], 'Count' : val});
});
现在您将拥有一个如下所示的对象:
[
{ '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']
});
当然你也可以用php改变对象服务器端,但我不知道它是如何构建的,所以我无法帮助那里。