如何使用CanvasJS的UNIX时间戳格式化X轴日期

Question

我正在尝试使用CanvasJs创建一个烛台图，我目前无法格式化X轴正确显示日期。

我从数据库中提取这些数据。当我从数据库中提取日期时，我将其作为UNIX时间戳拉出来。我希望X轴显示每个数据点的日期（我想每月做一次，但是一旦得到这个，我会担心这个）。我尝试使用“label”和“x”作为X轴上的日期点。

array_push($dataPoints, array("label"=>$row->day, "y"=> array($row->openPrice, $row->high, $row->low, $row->closePrice)));.

这就是我创建图表的方法。 window.onload = function（）{

        var chart = new CanvasJS.Chart("chartContainer", {
            zoomEnabled:true,
            title: {
                text: "Apple Historical Prices"
            },
            axisX: {
                labelFormatter: function (e) {
                    return CanvasJS.formatDate( e.value, "DD MMM");
                },
                valueFormatString: "DD MMM"
            },
            axisY: {
                includeZero: false,
                prefix: "$"
            },
            data: [{
                type: "candlestick",
                xValueType: "dateTime",
                yValueFormatString: "$###.##",
                dataPoints: <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>
            }]
        });
        chart.render();

        }

我需要在此处更改以正确格式化X轴以显示日期（从UNIX时间戳转换）

目前，它仅为每个数据点显示“DEC 31”。

Answer 1

扎克，

您将标签和y值传递给dataPoints，而xValueType适用于x-values。由于您没有在dataPoints中传递x值，因此库会将其自动生成为1,2,3,4,5 ...这会在labelFormatter中为您提供不需要的结果。

您可以通过将它乘以1000来convert Unix timestamp to JavaScript timestamp。然后在dataPoints中将该值传递为“x”。

array_push($dataPoints, array("x"=>strtotime($row->day)*1000, "y"=> array($row->openPrice, $row->high, $row->low, $row->closePrice)));.