Highcharts從PHP多個系列JSON

Question

嗨，大家好，我需要與Highcharts庫的幫助，我有這個陣列從PHP來，

[{"name":"25% en cambio de aceite 76 lubricants","data":[["2015-09-07",1],["2015-09-23",2],["2015-09-24",3],["2015-09-30",3]]},{"name":"10% Descuento en filtro de aceite","data":[["2015-09-07",1],["2015-09-23",2],["2015-09-24",3],["2015-09-30",3],["2015-10-03",3],["2015-10-05",1],["2015-10-09",1],["2015-10-10",1]]}] 

我需要動態地顯示此爲折線圖，但一直未能做到這一點，相信錯誤來自於日期引號，需要在格式[Date.UTC（2015，2,6），3]

這是我的PHP函數返回JSON數據

public function actionTransactionsRedeemed() { 
    // Transacciones Totales redimidas por merchant 
    $sql = "SELECT DISTINCT `transaction`.idPromotion, promotion.`name` FROM `transaction` INNER JOIN promotion ON `transaction`.idPromotion = promotion.idPromotion WHERE `transaction`.idMerchant = 2 AND `transaction`.idPromotion IS NOT NULL"; 
    $idPromotion = Yii::app()->db->createCommand($sql)->queryAll(); 
    $idPromotions = array(); 

    $tempArray = array(); 
    $result = array(); 
    $i = 1; 
    $rs = array(); 

    foreach($idPromotion as $i){ 
     //process each item here 
     $id = $i["idPromotion"]; 
     $tempArray['name'] = $i["name"]; 

     $sql = "SELECT count(*) AS count, DATE(`transaction`.date) AS `date` FROM `transaction` WHERE `transaction`.idMerchant = 2 AND `transaction`.idPromotion = $id GROUP BY DATE(`transaction`.date)"; 
     $transactionsRedeemed = Yii::app()->db->createCommand($sql)->queryAll(); 
     foreach($transactionsRedeemed as $item2){ 
      $rs[0] = $item2['date']; 
      $rs[1] = $item2['count']; 
      $tempArray['data'][] = $rs; 
      $rs = array(); 
     } 
     $i++; 
     array_push($result, $tempArray); 
    } 
    //$result = json_encode($result, JSON_NUMERIC_CHECK); 

    //echo json_decode($result); 
    print json_encode($result, JSON_NUMERIC_CHECK); 
} 

這就是jquery建立圖表

$(document).ready(function() { 
    var options = { 
     chart: { 
      type: 'spline', 
      renderTo: 'chart-merchant-day', 
      defaultSeriesType: 'spline', 
      marginRight: 130, 
      marginBottom: 25 
     }, 
     title: { 
      text: 'Total de promociones redimidas', 
      x: -20 //center 
     }, 
     subtitle: { 
      text: '', 
      x: -20 
     }, 
     xAxis: { 
      type: 'datetime', 
      dateTimeLabelFormats: { // don't display the dummy year 
       month: '%e. %b', 
       year: '%b' 
      }, 
      labels: { 
       align: 'center', 
       x: -3, 
       y: 20, 
       formatter: function() { 
        return Highcharts.dateFormat('%l%p', this.value); 
       } 
      } 
     }, 
     yAxis: { 
      title: { 
       text: 'Transacciones' 
      }, 
      plotLines: [{ 
       value: 0, 
       width: 1, 
       color: '#808080' 
      }] 
     }, 
     tooltip: { 
      formatter: function() { 
        return Highcharts.dateFormat('%l%p', this.x-(24000*3600)) +'-'+ Highcharts.dateFormat('%l%p', this.x) +': <b>'+ this.y + '</b>'; 
      } 
     }, 
     legend: { 
      layout: 'vertical', 
      align: 'right', 
      verticalAlign: 'top', 
      x: -10, 
      y: 100, 
      borderWidth: 0 
     }, 
     series: [{ 
      name: 'Count' 
     }], 
     credits: false 
    } 
    // Load data asynchronously using jQuery. On success, add the data 
    // to the options and initiate the chart. 
    jQuery.get('?r=/transactions/transactionsRedeemed', null, function(tsv) { 
     var lines = []; 
     traffic = []; 

     var data = $.parseJSON(tsv); 
     var x = 0; 

     //console.log(tsv); 

     $.each(data, function(i, item) { 
      //alert(item); 
      //console.log(item); 

      $.each(item, function(y, item2) { 

       if(y == "data"){ 
        //console.log(item2); 
        try { 
         tsv = item2; 
         // split the data return into lines and parse them 
         tsv = tsv.split(/\n/g); 
         jQuery.each(tsv, function(i, line) { 
          line = line.split(/\t/); 
          options.series[x].data.push([Date.parse(line[0]),line[1]]); 
          /*date = Date.parse(line[0] +' UTC'); 
          traffic.push([ 
           date, 
           parseInt(line[1].replace(',', ''), 10) 
          ]);*/ 
         }); 
        } catch (e) { } 

        options.series[x].data = traffic; 

       } else if(y == "name"){ 
        options.series[x].name = item2; 
       } 
      }); 
      x++; 
     }); 
     chart = new Highcharts.Chart(options); 
     //console.log(tsv.replace(/\"/g, "")); 
     //tsv = tsv.replace(/\"/g, ""); 
    }); 
}); 

任何幫助將不勝感激，即時消息如此疲憊在這一點上。

Answer 1

功能實際上是比較簡單，

jQuery.get('?r=/transactions/transactionsRedeemed', null, function(tsv) { 

    var data = $.parseJSON(tsv); 
    $.each(data, function (i, item) { 
     options.series.push({ 
      name: item['name'], 
      data: [] 
     }); 
     $.each(item['data'], function (j, dataitem) { 
      var dataitemvalue = null; 
      try { 
       dataitemvalue = [Date.parse(dataitem[0]), dataitem[1]]; 
      } catch (e) {} 
      options.series[i].data.push(dataitemvalue); 
     }); 
    }); 

    chart = new Highcharts.Chart(options); 

}); 

JSFiddle demo