Question

我正在使用高清图中的柱形图我想在日期格式中显示x轴，我从我的帐户的谷歌分析数据中获取。我想在x轴上查看日期，哪些未来格式我想以格式化的方式。它就像这样“20151001”，我希望它像这样“01-10-2015” 我的数据来自谷歌分析账户，所以我不能使用高清数据这是我的代码

从中获取日期的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>';
     }

通过$ date的var_dump我得到这种格式的日期：

    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毫秒）

{{edit ----------

最后一个方法的一个例子：

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

您提供：

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

图表完成其余的工作。

{{编辑评论：

因此，您可以将pointStart和pointInterval属性放在两个位置之一 - 可以在plotOptions中，也可以直接在系列属性中。 pointRange不一定是必需的，但它通常是一个好主意，因为它修复了列/条的一些潜在的间距问题。

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

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轴中的高图表日期格式

此处编辑的代码

1 个答案: