2016-06-21 53 views
0

我正在使用Highchart和Codeigniter。我正在顯示不同月份的項目請求。在Codeigniter中使用Highchart

圖形顯示正常,但x軸值顯示的是numneric值(0,1,2 ...)而不是月份名稱。這是我的控制器代碼:

public function data() 
{ 

$data = $this->project->get_data(); 

$ab = array(); 
$category['name'] = 'Category'; 

$series1 = array(); 
$series1['name'] = 'WordPress'; 

$series2 = array(); 
$series2['name'] = 'Code Igniter'; 

$series3 = array(); 
$series3['name'] = 'Highcharts'; 

foreach ($data as $row) 
{ 
$category['data'][] = $row->month; 
$series1['data'][] = $row->wordpress; 
$series2['data'][] = $row->codeigniter; 
$series3['data'][] = $row->highcharts; 
} 

$result = array(); 
$result1 = array(); 
array_push($result1,$category); 
array_push($result,$series1); 
array_push($result,$series2); 
array_push($result,$series3); 

$this->view_data['ctg'] = json_encode($result1, JSON_NUMERIC_CHECK); 
$this->view_data['series_data'] = json_encode($result, JSON_NUMERIC_CHECK); 
$this->load->view('chart_high', $this->view_data); 
} 

下面給出在chart_high視圖:

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Line Chart</title> 
<script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/javascript"> 
var test = 
$(function() { 
       $('#container').highcharts({ 
     chart: { 
      renderTo: 'container', 
      type: 'column', 
      marginRight: 130, 
      marginBottom: 25 
     }, 
     title: { 
      text: 'Project Requests', 
      x: -20 //center 
     }, 
     subtitle: { 
      text: '', 
      x: -20 
     }, 
     xAxis: { 
      categories: [] 
     }, 
     yAxis: { 
      title: { 
       text: 'Requests' 
      }, 
      plotLines: [{ 
       value: 0, 
       width: 1, 
       color: '#808080' 
      }] 
     }, 
     tooltip: { 
      formatter: function() { 
        return '<b>'+ this.series.name +'</b><br/>'+ 
        this.x +': '+ this.y; 
      } 
     }, 
     credits: { enabled: false }, 
     legend: { 
      layout: 'vertical', 
      align: 'right', 
      verticalAlign: 'top', 
      x: -10, 
      y: 100, 
      borderWidth: 0 
     }, 

     series: <?php echo $series_data ?> 
    }); 
      }); 

</script> 
<script type="text/javascript" language="javascript" src="<?php echo base_url(); ?>js/highcharts.js"></script> 
<script type="text/javascript" language="javascript" src="<?php echo base_url(); ?>js/exporting.js"></script> 

</head> 
<body> 
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto">  </div> 
</body> 
</html> 

如果我硬編碼類別爲[「一月」,「二月」],則X軸的值是按照我想要的方式顯示爲一月,二月等。

請在這方面幫助我。

由於提前,

+0

它看起來像你應該改變你的系列數據數組。你可以嘗試使你的數據看起來類似於:[[''month1',1],['month2',1]],它應該適用於你的情況。 –

+0

當我使用 打印json_encode($ result1,JSON_NUMERIC_CHECK); 然後輸出爲 [{「name」:Category「,」data「:[」January「,」February「,」March「..」December「]}]。 我只需要捕獲數據部分並放入類別 任何幫助這樣做將不勝感激,因爲我在我的智慧結束。 – John

回答

1

我曾嘗試使用下面的代碼解決了這個問題:在chart_high視圖

$result = array(); 

    array_push($result,$series1); 
    array_push($result,$series2); 
    array_push($result,$series3); 

    $ctg=$category['month']; 

    $this->view_data['month'] = json_encode($ctg, JSON_NUMERIC_CHECK); 

然後,我用

xAxis: { 
      categories: <?php echo $month ; ?> 
     }, 

現在幾個月都顯示在X-如1月,2月,3月等..軸。 我在很多論壇搜索過,包括stackoverflow,但沒有找到任何解決方案。

我張貼,因爲它可能會幫助某人在未來。