Question

我正在使用Symfony，doctrine，twig和highchart.js。

我需要使用js库和doctrine ORM数据对象创建一个图表。

请在此处查看我的控制器：

public function chartTestAction() {

    $em=$this->getDoctrine()->getManager();
    $datasGraphique = $em->getRepository('mySpaceMyBundle:Graphique2')->findAll();

    return $this->render('MySpaceMyBundle:myFolder:chartTest.html.twig',
                         array('datasGraphique' => $datasGraphique)
                         );
}

所以，我的实体在表模式中看起来像这样：

 ----------------
|Graphique entity|
|----------------|
|id              |
|consomation1    |
|consomation2    |
|consomation3    |
|dateIndex       |
|----------------|

为了便于说明，我的图表中有3个折线图，在我的线条图中，我需要为每个安慰设置dateIndex，如example。

事实上我在xAxis日期时间，每小时一小时，这是一个固定的间隔。但是我需要在yAxis上为日期时间设置xAxis的参数，以便在正确的dateIndex上正确显示线图。这意味着，xAxis是固定的，每小时一小时，但是如果我在2015-05-05 00:03:08上有一个dateIndex，则yAxis需要指向此日期，该日期不会出现在每小时xAxis固定小时数上。

这是我的twig视图，其中javascript部分包含highchart.js的系列代码：

series: [
    //consomation1
        {
            yAxis: 1,
            type: 'spline',
            name: '{{consomation1Name}}',
            data: [{% for data in datasGraphique %}
                    [Date.UTC({{data.dateIndex|date("Y,m,d,H,i,s"")}}), {{data.consomation1}}],
                  {% endfor %}],
            tooltip: {
                valueSuffix: ' kW'
            },

        },
        //consomation2
        {
            yAxis: 2,
            name: '{{consomation2Name}}' ,
            data: [{% for data in datasGraphique %}
                    [Date.UTC({{data.dateIndex|date('Y,m,d,H,i,s"', "Europe/Paris")}}), {{data.consomation2}}],
                  {% endfor %}],
            tooltip: {
              valueSuffix: ' kW'
            },

         },
        //consomation3
        {
            name: '{{consomation3Name}}' ,
            data: [{% for data in datasGraphique %}
                    [Date.UTC({{data.dateIndex|date("Y,m,d,H,i,s"")}}), {{data.consomation3}}],
                  {% endfor %}],
            type: 'spline',
            tooltip: {
                valueSuffix: ' °C'
            },
            dashStyle: 'shortdot',

        }
    ]

Date.UTC转换时出现问题。实际上，js脚本没有返回任何错误，除了datetime之外它运行良好。例如，在我的数据库中，我将此字段2015-05-05 00:03:08与 2015年匹配，5月匹配为mounth，5为00:03:08，小时：分：秒。但是在我的高图中，在date.UTC转换之后，它返回此日期2015, Jun, 5, 00:03:08的值，该值与我的实际数据不匹配，只是月份，因为在UTC 1月= 0和12月= 11而不是datetime，其中January = 1，December = 12。

有人知道解决方案吗？

我认为首先我需要在我的dql查询中转换unix时间戳中的datetime，但我知道该doctrine不支持UNIX_TIMESTAMP函数转换。

我怎样才能有正确的月份，我可以在javascrip中强行执行此操作吗？

这是我的javascript for xAxis中的代码：

//xAxis setup to manage the chart
    xAxis: [{
        type: 'datetime',
        dateTimeLabelFormats: {
            day: '%H:%M',
        },

        tickInterval: 3600 * 1000,
        title: {
            text: '<b>Heures journalière</b> '
        },
        crosshair: true,
        tickWidth: 1,
        gridLineWidth: 2
    }],

编辑 - 尝试使用Date.parse（）

我尝试了这个解决方案：

{
    yAxis: 2,
    name: '{{consomation1Name}}' ,
    data: [{% for data in datasGraphique %}
            [Date.parse({{data.dateIndex|date("Y-m-d H:i:s")}}), {{data.consoECS}}],
          {% endfor %}],
    tooltip: {
      valueSuffix: ' kW'
    },
},

它返回了我的错误Uncaught SyntaxError: missing ) after argument list：

data: [
  [Date.parse(2015-05-05 00:03:08), 0], // the error occured on the first data render here
  [Date.parse(2015-05-05 01:19:34), -2],
  [Date.parse(2015-05-05 02:44:16), 0],
  [Date.parse(2015-05-05 03:18:19), 0],
  [Date.parse(2015-05-05 04:24:06), 0],
  [Date.parse(2015-05-05 05:12:44), 0],
  [Date.parse(2015-05-05 06:55:08), 0],
  [Date.parse(2015-05-05 07:26:08), 0],
  [Date.parse(2015-05-05 08:32:05), 1],
  [Date.parse(2015-05-05 09:34:50), 2],
  [Date.parse(2015-05-05 10:42:16), 3],
  [Date.parse(2015-05-05 11:16:03), 3],
  [Date.parse(2015-05-05 12:27:07), 1],
  [Date.parse(2015-05-05 13:22:08), 1],
  [Date.parse(2015-05-05 14:18:51), 3],
  [Date.parse(2015-05-05 15:06:27), -1],
  [Date.parse(2015-05-05 16:40:00), 2],
  [Date.parse(2015-05-05 17:30:24), 1],
  [Date.parse(2015-05-05 18:36:24), 0],
  [Date.parse(2015-05-05 19:43:57), 0],
  [Date.parse(2015-05-05 20:32:41), 0],
  [Date.parse(2015-05-05 21:28:29), 0],
  [Date.parse(2015-05-05 22:37:14), 0],
  [Date.parse(2015-05-05 23:53:14), 0],
],

Answer 1

让事情发挥作用：

将useUTC设为false
更改日期格式并使用Date.parse()：Date.parse('{{data.dateIndex|date("Y-m-d H:i:s")}}')

工作演示：http://jsfiddle.net/4099kjzy/

Answer 2

要使用unix时间戳并避免日期格式问题，可以替换

[Date.UTC({{data.dateIndex|date("Y,m,d,H,i,s"")}})

通过

[Date.UTC({{data.dateIndex.date("U") }})

使用Date.UTC转换时返回日期时间的正确月份

2 个答案: