将两个 javascripts 合并为一个 foreach
merge two javascripts into one foreach
我的 laravel blade 视图中有 javascript。我想知道我是否可以将这两个脚本合并为一个。
每个 bootstrap 选项卡中的脚本显示图表。
首先是脚本:
var chart1 = AmCharts.makeChart( "chart_visits", {
"dataProvider": [
@foreach($results as $result)
{
"date": "{{ date('Y-m-d', strtotime($result->time)) }}",
"value": '{{ $result->stats->visits }}'
},
@endforeach
]
} );
第二个脚本:
var chart1 = AmCharts.makeChart( "chart_visits", {
"dataProvider": [
@foreach($results as $result)
{
"date": "{{ date('Y-m-d', strtotime($result->time)) }}",
"value": '{{ $result->stats->bounceRate }}'
},
@endforeach
]
} );
这是我的观点:
<ul class="nav nav-tabs">
<li>
<a href="#bounce" data-toggle="tab"> Bounce rate </a>
</li>
<li class="active">
<a href="#visits" data-toggle="tab"> Visits </a>
</li>
</ul>
.
<div class="tab-content">
<div class="tab-pane active" id="visits">
<div class="chartdiv" id="chart_visits"></div>
</div>
<div class="tab-pane" id="bounce">
<div class="chartdiv" id="chart_bounce"></div>
</div>
</div>
如果我理解正确的话,最简单的方法就是从对象集合创建普通数组并对其进行迭代。类似于:
var chart1 = AmCharts.makeChart( "chart_visits", {
"dataProvider": [
@foreach($results as $result)
{
"date": "{{ date('Y-m-d', strtotime($result['date'])) }}",
"value": "{{ $result['value'] }}"
},
@endforeach
]
} );
正确答案是jquery函数extend
两个都一样的脚本,我不想干:
var config = {
"type": "serial",
"theme": "light",
"marginRight": 40,
"marginTop": 60,
"marginLeft": 40,
"autoMarginOffset": 0,
"dataDateFormat": "YYYY-MM-DD",
};
将在两个脚本中扩展重复值的第一个脚本:
AmCharts.makeChart( "chart_leads", jQuery.extend({}, config, {
"dataProvider": [
@foreach($results as $result)
{
"date": "{{ date('Y-m-d', strtotime($result->time)) }}",
"value": '{{ $result->stats->leads }}'
},
@endforeach
]
} ));
将在两个脚本中扩展重复值的第二个脚本:
AmCharts.makeChart( "chart_visits", jQuery.extend({}, config, {
"dataProvider": [
@foreach($results as $result)
{
"date": "{{ date('Y-m-d', strtotime($result->time)) }}",
"value": '{{ $result->stats->visits }}'
},
@endforeach
]
} ));
我的 laravel blade 视图中有 javascript。我想知道我是否可以将这两个脚本合并为一个。 每个 bootstrap 选项卡中的脚本显示图表。
首先是脚本:
var chart1 = AmCharts.makeChart( "chart_visits", {
"dataProvider": [
@foreach($results as $result)
{
"date": "{{ date('Y-m-d', strtotime($result->time)) }}",
"value": '{{ $result->stats->visits }}'
},
@endforeach
]
} );
第二个脚本:
var chart1 = AmCharts.makeChart( "chart_visits", {
"dataProvider": [
@foreach($results as $result)
{
"date": "{{ date('Y-m-d', strtotime($result->time)) }}",
"value": '{{ $result->stats->bounceRate }}'
},
@endforeach
]
} );
这是我的观点:
<ul class="nav nav-tabs">
<li>
<a href="#bounce" data-toggle="tab"> Bounce rate </a>
</li>
<li class="active">
<a href="#visits" data-toggle="tab"> Visits </a>
</li>
</ul>
.
<div class="tab-content">
<div class="tab-pane active" id="visits">
<div class="chartdiv" id="chart_visits"></div>
</div>
<div class="tab-pane" id="bounce">
<div class="chartdiv" id="chart_bounce"></div>
</div>
</div>
如果我理解正确的话,最简单的方法就是从对象集合创建普通数组并对其进行迭代。类似于:
var chart1 = AmCharts.makeChart( "chart_visits", {
"dataProvider": [
@foreach($results as $result)
{
"date": "{{ date('Y-m-d', strtotime($result['date'])) }}",
"value": "{{ $result['value'] }}"
},
@endforeach
]
} );
正确答案是jquery函数extend
两个都一样的脚本,我不想干:
var config = {
"type": "serial",
"theme": "light",
"marginRight": 40,
"marginTop": 60,
"marginLeft": 40,
"autoMarginOffset": 0,
"dataDateFormat": "YYYY-MM-DD",
};
将在两个脚本中扩展重复值的第一个脚本:
AmCharts.makeChart( "chart_leads", jQuery.extend({}, config, {
"dataProvider": [
@foreach($results as $result)
{
"date": "{{ date('Y-m-d', strtotime($result->time)) }}",
"value": '{{ $result->stats->leads }}'
},
@endforeach
]
} ));
将在两个脚本中扩展重复值的第二个脚本:
AmCharts.makeChart( "chart_visits", jQuery.extend({}, config, {
"dataProvider": [
@foreach($results as $result)
{
"date": "{{ date('Y-m-d', strtotime($result->time)) }}",
"value": '{{ $result->stats->visits }}'
},
@endforeach
]
} ));