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'));
}

嘿,伙计们,目前我已经完成了一个基本的功能,可以根据从数据库中选择的日期查看图表。图表运行良好,但如果没有图表,则会显示为javascript - 如何在laravel中对 Highcharts 进行if else语句-LMLPHP
所以我的意思是它是正确的,但是看起来有点难看,所以我如何写一个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

10-05 20:58
查看更多