Blade文件中的HTML和JS。
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// Build the chart
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Pie Chart'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'Percentage',
colorByPoint: true,
data: [{
name: 'Questions Asked',
y: {!! $question_asked_sum !!},
sliced: true,
selected: true
}, {
name: 'Low Confidence',
y: {!! $low_confidence_sum !!}
}, {
name: 'No Answer',
y: {!! $no_answer_sum !!}
}, {
name: 'Missing Intent',
y: {!! $missing_intent_sum !!}
}]
}]
});
});
</script>
<div class="panel-body">
<form id="form-project" role="form" action="{{action('AltHr\Chatbot\TrackerController@graph')}}" autocomplete="off" method="POST">
{{csrf_field()}}
<div class="form-group-attached">
<div class="row">
<div class="col-lg-6">
<div class="form-group form-group-default required" >
<label>From</label>
<input type="date" class="form-control" name="from" required>
</div>
</div>
<div class="col-lg-6">
<div class="form-group form-group-default required" >
<label>To</label>
<input type="date" class="form-control" name="to" required>
</div>
</div>
</div>
</div>
<br/>
<button class="btn alt-btn-black btn-xs alt-btn pull-right" type="submit">Select</button>
</form>
<br/><br/>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
</div>
控制器中的功能。
public function graph(Request $request)
{
//$statistics = DiraStatistics::where('date_access',$request->date)->get();
$statistics = DiraStatistics::whereBetween('date_access',array($request->from, $request->to))->get();
$question_asked_sum = $statistics->sum('question_asked');
$low_confidence_sum = $statistics->sum('low_confidence');
$no_answer_sum = $statistics->sum('no_answer');
$missing_intent_sum = $statistics->sum('missing_intent');
return view('AltHr.Chatbot.graph', compact('question_asked_sum', 'low_confidence_sum', 'no_answer_sum', 'missing_intent_sum'));
}
嘿,伙计们,目前我已经完成了一个基本的功能,可以根据从数据库中选择的日期查看图表。图表运行良好,但如果没有图表,则会显示为
所以我的意思是它是正确的,但是看起来有点难看,所以我如何写一个if-else语句,这样如果在所选日期之间没有数据,那么它就不会显示为图表,而是“没有数据,请先选择一个日期”,但是如果有数据,如果选择了日期,那么就显示图表?
最佳答案
你可以使用blade@if
语句
{{-- if all values are empty, show message without the chart --}}
@if ( empty($question_asked_sum) && empty($low_confidence_sum) && empty($no_answer_sum) && empty($missing_intent_sum) )
no data, please select a date first
@else
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
<script type="text/javascript">
{{-- your highchart logic here --}}
</script>
@endif