x 轴高图表日期格式

Question

我在 highchart 中使用柱形图，我想以日期格式显示 x 轴，我从 account.and 的 google 分析数据中获取我想查看日期x 轴，它不是以格式出现的，我希望它以格式化的方式出现。它像这样“20151001”，我希望它像这样“01-10-2015” 我的数据来自 google 分析账户，所以我不能使用 highchart 数据这是我的代码

php 我从中获取日期的代码

     $matrics='ga:sessions,ga:pageviews';
     $results_top_pages = $analytics->data_ga->get(
    'ga:109200082',
     date('Y-m-d',strtotime('-6 days')),
     date('Y-m-d',strtotime('now')),
     $matrics,
      array(

        'dimensions' => 'ga:date',
       // 'sort' => '-ga:pageviews', for acsending and decending page view sorting
    'filters'=>'ga:browser%3D~%5E'.$browser.'',
        'max-results' => 50
     ));

  if(is_array($results_top_pages->getRows())){
      echo '<ol>';
      foreach($results_top_pages->getRows() as $top_page){
        echo '<li>';
        echo $top_page[0];
        echo ' - '.$top_page[1].' ';
        echo ' - '.$top_page[2].' ';
        $data[]=$top_page[2];
        $date[]=$top_page[0];
        echo '</li>';
        }
         echo '</ol>';
     }

通过 var_dump of $date 我得到的日期格式如下：

    array(7) {
   [0]=>
   string(8) "20150930"
   [1]=>
   string(8) "20151001"
   [2]=>
   string(8) "20151002"
   [3]=>
   string(8) "20151003"
   [4]=>
   string(8) "20151004"
   [5]=>
    string(8) "20151005"
   [6]=>
   string(8) "20151006"
   }

从此处编辑代码

::

    This is js code for highchart:

       $data[]=$top_page[2];
      $date[]=date('d-m-y',strtotime($top_page[0]));

       // echo '</li>';
         }
          echo '</ol>';
      }
      var_dump($date[0]);
       $datefirst= date('U', strtotime($date[0])) * 1000;

     ?>

    <script>

     $(function () {

        $('#container').highcharts({
         //alert("call");

     chart: {
         type: 'column'
     },
     title: {
        text: 'Weekly Traffic'
     },
     subtitle: {
         //text: 'Source: WorldClimate.com'
      },
      xAxis: {

        categories: [<?php echo join($date,','); ?>],
        max:6
       },
      yAxis: {
            title: {
            text: 'Views'
        }
      }, 
       plotOptions: {
        line: {
            dataLabels: {
                enabled: true,
            connectNulls: false
             },
             enableMouseTracking: false
           }
       },
       series: [{
       pointStart: '<?php echo $datefirst; ?>',
        pointInterval: 86400000, //one day
        pointRange: 86400000, //one day
        name: '<?php echo $browser; ?>',
        data: [<?php echo join($data, ',') ?>],
        //pointStart: Date.UTC(2015, 0, 1),
        //  pointInterval: 24 * 3600 * 1000
       },

       ]
        });
        });
       </script>
      <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Answer 1

好的，所以，根据您的示例，您只需要正确设置日期格式即可。

像这样：

foreach($results_top_pages->getRows() as $top_page){
    echo '<li>';
    echo $top_page[0];
    echo ' - '.$top_page[1].' ';
    echo ' - '.$top_page[2].' ';
    $data[]=date('d-m-Y', strtotime($top_page[2])); //add the date function
    $date[]=date('d-m-Y', strtotime($top_page[0])); //add the date function 
    echo '</li>';
    }
     echo '</ol>';
 }

如果您想使用 datetime x 轴类型，我建议您在显示时间序列数据时使用这种类型，只需将格式更改为使用毫秒纪元时间，如下所示：

date('U', strtotime($top_page[2])) * 1000

但不是构建类别数组，而是将该值设置为数据的 x 值。

或者，如果数据始终是每日值，您可以将 pointStart 属性设置为开始时间，并将 pointInterval 属性作为 1 天（86400000 毫秒）

{{编辑---------

最后一个方法的例子：

http://jsfiddle.net/jlbriggs/xabj5qgp/

您提供：

纪元格式的开始日期时间戳
点之间的间隔（即一天 - 以毫秒为单位）
您的数据点数组，每个时间间隔（天）一个数据点

图表完成剩下的工作。

{{编辑评论：

因此，您可以将 pointStart 和 pointInterval 属性放在两个位置之一 - 在 plotOptions 中，或直接在系列属性中。 pointRange 不一定是必需的，但它通常是一个好主意，因为它修复了 columns/bars.

的一些潜在间距问题

所以在你的情况下，采取这个：

series: [{
    name: '<?php echo $browser; ?>',
    data: [<?php echo join($data, ',') ?>]
},

并在那里添加属性：

series: [{
    pointStart: __your_start_date__,
    pointInterval: 86400000, //one day
    pointRange: 86400000, //one day
    name: '<?php echo $browser; ?>',
    data: [<?php echo join($data, ',') ?>]
},

您需要从数据源中检索开始日期并将其格式化为以毫秒为单位的纪元时间（如上所示）

x 轴高图表日期格式

high chart date format in x-axis

google-analytics

highcharts

column-chart

从此处编辑代码