与AJAX请求的Hightchart

Question

美好的一天，我试图创建一个图表。图表value从ajax return。

我得到这个数据

"tgl":["2016-07-12 00:00:00.000","2016-07-01 00:00:00.000"],"total":[1283947,1234618514]} 

，并在这里是我的js的手柄hightchart

xAxis: { 
      categories: [ 
      $.each(data.tgl, function(k, v) { 
        data.tgl 
      }) 
       ] 
      }, 
    series: [{ 
      name: 'Outlet' +$("#outlet").val(), 
        data: [ 
         $.each(data.total, function(k, v) { 
           data.total 
          }) 
        ] 

     }] 

我不知道我foreach ajax怎么那么请点击此链接jQuery loop over JSON result from AJAX Success?

这里是我的php

function getajax() 
    { 
     extract(populateform()); 
     $explode = explode('-',$date_search); 
     $start_date = inggris_date($explode[0]); 
     $end_date = inggris_date($explode[1]); 

     $hasil = $this->modelmodel->showdata("select tanggal,(cash + cc + dc + flash + piutang + reject + disc50) 
               total from transaksi 
               where tanggal between '$start_date' and '$end_date' and 
               outlet = '".$outlets."' order by tanggal desc"); 

     $data = array(); 
     foreach($hasil as $hsl) 
      { 
       $data['tgl'][] = $hsl->tanggal; 
       $data['total'][] = $hsl->total; 
      } 
     echo json_encode($data); 
    } 

我上面的脚本的结果是这样的。

，你可以从上面我看到的数据。我的图表没有显示正确的价值。它应该是这样的2016-07-12 00:00:00.000 => 1283947 and 2016-07-01 00:00:00.000 => 1234618514

我鲈拨弄https://jsfiddle.net/oyrogu9v/1/

Answer 1

你应该在系列2个的值：时间和总。

series: [{ 
     name: 'Winter 2012-2013', 
     data: [ 
      [Date.UTC(1970, 9, 21), 0], 
      [Date.UTC(1970, 10, 4), 0.28], 
      .................. 

，你可以在这里看到一个样本： Highchart sample timeserie

请试试这个代码：

$(document).ready(function() { 

    $("#test").click(function() { 
     var $btn = $(this); 
     $btn.button('loading'); 
      $.ajax({ 
       url: '<?=base_url();?>graph/getajax', 
       data: {outlets:$("#outlet").val(),date_search:$("#reservation").val()}, 
       type: 'POST', 
       dataType: 'JSON', 
       success: function(data) { 
         var res= []; 
      $.each(data, function(k, v) { 
              res.push([new Date(data[k].tanggal).getTime(), data[k].total])}); 

       $('#container').highcharts({ 
          title: { 
           text: '', 
           x: -20 //center 
          }, 
          subtitle: { 
           text: 'Omset ' + $("#outlet").val(), 
           x: -20 
          }, 
          xAxis: { 
           type: 'datetime' 
          }, 
          yAxis: { 
           title: { 
            text: 'Rupiah (Rp.)' 
           }, 
           plotLines: [{ 
            value: 0, 
            width: 1, 
            color: '#808080' 
           }] 
          }, 
          tooltip: { 
           valueSuffix: ' Rupiah' 
          }, 
          legend: { 
           layout: 'vertical', 
           align: 'right', 
           verticalAlign: 'middle', 
           borderWidth: 0 
          }, 

          series: [{ 
           name: 'Outlet '+ $("#outlet").val(), 
           data:res 
          }] 

         }); 

        }); 

     setTimeout(function() { 
      $btn.button('reset'); 
     }, 1000); 
    }); 

}）;

在这里你可以看到结果：https://jsfiddle.net/mb89apxr/