Question

我正在尝试使用CanvasJs创建一个烛台图，目前我在格式化X轴正确以显示日期方面遇到麻烦。

我正在从数据库中提取此数据。当我从数据库中提取日期时，我将其作为UNIX时间戳来提取。我希望X轴显示每个数据点的日期（我只想每月进行一次，但是一旦获得该信息，我将在稍后担心）。我尝试在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

Zack，

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

您可以convert Unix timestamp to JavaScript timestamp乘以1000。然后在dataPoints中将该值作为'x'传递。

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

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

1 个答案: