javascript - 如何在codeigniter中使用ajax将数据传递到bar Highchart？

Question

我已经使用 php 将数据传递到 bar highchart 并且它的工作。但是当我加载页面时大约需要5 秒（足够长）。在我做了一些研究之后，我发现许多论坛推荐使用 ajax 进行 Highchart。所以我只是猜测也许使用 ajax 可以使页面加载更快（如果我错了，请纠正我）。

但问题是，我不知道如何将 ajax 用于 Bar highchart。谁能帮助我并给我一些线索如何开始使用ajax将数据从Controller传递到ajax？

这是我当前的代码：

模型 ：

 public function isiChart()
 {
$query = $this->db->query('select KODE_BRG,NAMA_BRG,COUNT(case when total=3 then 1 else null end) OOS,
                            COUNT(case when total >=1 and total <= 3 then 1 else null end) kurang_4,
                            COUNT(case when total>3 then 1 else null end)  OSA from 
                            (select  b.KODE_BRG,d.NAMA_BRG,b.JUM_KARTON,b.JUM_SATUAN,b.JUM_KARTON*d.FRACT+b.JUM_SATUAN  total
                            from assrkmd a 
                            left join assrkmdstok b on b.TGL_RKM=a.TGL_RKM and b.KODE_MDS=a.KODE_MDS and b.KODE_CUS=a.KODE_CUS
                            left join asscus c on c.KODE_CUS=a.KODE_CUS
                            inner join asstok d on d.KODE_BRG=b.KODE_BRG
                            left join asssup e on e.KODE_SPL=d.KODE_SPL
                            left join asssgrup f on f.KODE_SGRUP=c.KODE_SGRUP
                            left join assgrup g on g.KODE_GRUP=f.KODE_GRUP
                            inner join assmds h on h.KODE_MDS=a.KODE_MDS
                            left join asssgrupbrg i on i.KODE_SGRUP=d.KODE_SGRUP
                            left join assgrupbrg j on j.KODE_GRUP=i.KODE_GRUP 
                            inner join assgrupmds k on k.KODE_GROUP=h.KODE_GROUP
                            where h.TIPE_MDS =0 and a.CHECK_OUT is not null ) g 
                            group by KODE_BRG,NAMA_BRG order by NAMA_BRG');
                            return $query;

控制器 ：

public function index()
{

    $data['db1'] = $this->m_mds->isiChart();

    $data['content'] = 'tempelates/MDS/content';
    $data['chart'] = 'tempelates/MDS/chart';
    $this->load->view('tempelate',$data);
}

看法 ：

 <div class="col-md-12 col-sm-12">
 <div class="x_panel">                  
 <div class="x_title">
  <h2>Bar graph <small>Sessions</small></h2>
  <ul class="nav navbar-right panel_toolbox">
    <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
    </li>
  </ul>
  <div class="clearfix"></div>
</div>
<div class="x_content">
<div id="container" style="overflow-x: auto;"></div>
</div>
</div>
</div>
<!-- jQuery -->
<script src="<?php echo base_url()?>assets/vendors/jquery/dist/jquery.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<?php foreach ($db1->result_array() as $key) { <---! Here i foreach data comes from Controller--->
  $data[]= $key['NAMA_BRG'];
  $data0[]=$key['OOS'];
  $data1[]= $key['kurang_4'];
  $data2[]=$key['OSA'];
}?>
<script>
 Highcharts.chart('container', {
 chart: {type: 'bar',options3d: { enabled: true, }},
 title: {text: 'All Product vs Call'},
 xAxis: {
   categories: [<?php echo '"'.join('","',$data).'"';?> ],
   title: {text: null},
   min: 0,max: 8,
   scrollbar: {enabled: true},
   tickLength: 0},
   yAxis: {title: {text: ''}},
   legend: {reversed: true},
   plotOptions: {series: {stacking: 'normal'}},
   credits: {enabled: true},
   exporting: { enabled: true },
   dataSorting: { enabled: true},
   series: [{
   name: 'OOS',
   data: [<?php echo join(',',$data0);?>],
   color: 'rgba(54, 162, 235, 0.2)',
   borderColor: 'rgba(54, 162, 235, 1)',
   dataLabels: {enabled: true,
    color: '#FFFFFF',
    align: 'center',
    format: '<b>{point.name}</b><br>{point.percentage:.1f} %',
    y: 1, // 10 pixels down from the top
   style: {
     fontSize: '10px',
     fontFamily: 'Verdana, sans-serif'
    }
   }
  },{
   name: '<4',
   data: [<?php echo join(',',$data1);?>],
 color: 'rgba(255, 99, 132, 0.3)',
 borderColor: 'rgba(255, 99, 132, 1)',
 dataLabels: {
   enabled: true,color: '#FFFFFF',align: 'center',
   format: '<b>{point.name}</b><br>{point.percentage:.1f} %',
   y: 1, // 10 pixels down from the top
   style: { fontSize: '10px',fontFamily: 'Verdana, sans-serif'}
 }
 },{
  name: 'OSA',
  data: [<?php echo join(',',$data2);?>],
  color: 'rgb(51, 255, 153, 0.6)',
  borderColor: 'rgb(51, 255, 153)',
   dataLabels:{
    enabled: true,
    color: '#FFFFFF',
    align: 'center',
    format: '<b>{point.name}</b><br>{point.percentage:.1f} %',
    // format: '{point.y:.1f}', // one decimal
    y: 1, // 10 pixels down from the top
    style: {fontSize: '10px',fontFamily: 'Verdana, sans-serif'}
  }
 }]
 });
 </script>

标签： javascriptjqueryajaxcodeigniterhighcharts