0

我在highchart中使用柱形图我想以日期格式显示x轴，我从我的帐户的谷歌分析数据中获取。我想查看x轴上的日期，而不是我的格式想要格式化的方式。它像这样“20151001”，我希望它像这样“01-10-2015”我的数据来自谷歌分析帐户，所以我不能使用 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>';
     }

通过 $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>
4

1 回答 1

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>';
 }

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

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

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

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

{{编辑 - - - - -

最后一种方法的示例：

您提供：

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

图表完成了其余的工作。

{{编辑评论：

因此，您可以将 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, ',') ?>]
},

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

于 2015-10-07T16:37:14.833 回答