如何在 laravel 中为 highcharts 做 if else 语句

Posted 2023-02-24

【中文标题】如何在 laravel 中为 highcharts 做 if else 语句

【英文标题】：How to do a if else statement for highcharts in laravel

【发布时间】：2018-04-03 12:31:00

【问题描述】：

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 语句，以便如果所选日期之间没有数据，那么它不会显示为图表，而是“没有数据，请选择日期优先”，但如果有数据，如果选择日期，则显示图表？

【问题讨论】：

@NewToJS 谢谢。

【参考方案1】：

您可以使用刀片 @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

【讨论】：

很高兴能帮上忙