CanvasJS：xValueFormatString 根本不做任何事情答案

【问题标题】：CanvasJS: xValueFormatString does not do anythin at allCanvasJS：xValueFormatString 根本不做任何事情
【发布时间】：2026-02-16 02:10:01
【问题描述】：

所以，我偶然发现了一个我似乎无法克服的非常恼人的问题。我一直在尝试制作一个图表来显示一天中的温度变化。

一切都不是那么棘手，但我根本无法格式化从 PHP 传递给我的脚本的日期时间字符串。经过一些试验和错误，我想，我会下载另一个示例并从那里尝试。

`<?php



$dataPoints = array(
    array("x" => 1512441720000 , "y" => array(120, 78)),
    array("x" => 1512447240000 , "y" => array(147, 89)),
    array("x" => 1512453960000 , "y" => array(139, 85)),
    array("x" => 1512461700000 , "y" => array(160, 95)),
    array("x" => 1512466320000 , "y" => array(130, 84)),
    array("x" => 1512472020000 , "y" => array(138, 87)),
    array("x" => 1512475440000 , "y" => array(127, 78)),
    array("x" => 1512477540000 , "y" => array(119, 76)),
    array("x" => 1512482280000 , "y" => array(135, 82)),
    array("x" => 1512486900000 , "y" => array(122, 78)),
    array("x" => 1512490800000 , "y" => array(130, 82)),
    array("x" => 1512494160000 , "y" => array(122, 75))
 );

?>
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer", {
    animationEnabled: true,
    title:{
        text: "Blood Pressure Readings over a Day"
    },
    axisY: {
        title: "Pressure (in mmHg)",
        gridThickness: 0
    },
    data: [{
        type: "rangeArea",
        xValueType: "dateTime",
        yValueFormatString: "#,##0 mmHg",
        toolTipContent: "{x}<br><b>Systolic:</b> {y[0]}<br><b>Diastolic:</b> {y[1]}",
        dataPoints: <?php echo json_encode($dataPoints); ?>
    }]
});

chart.render();

}
</script>
</head>
<body>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>`

这东西很好用。请注意，我在那里没有“xValueFormatString”。原来有一个如下：“xValueFormatString:”hh:MM TT””，所以 x 轴上的时间戳显示从 00 到 12 的小时和从上午或下午的 00 到 59 的分钟。我想将其更改为“HH：mm”。什么都没做，还是和以前一样。现在我删除了它，它仍然是一样的。是什么告诉图形现在像这样格式化 x 轴？在我看来没什么。那么，为什么它保持不变？

我从中构建原始图表的另一个示例显示了相同的问题，只是原始格式为“YYYY:mm:dd hh:mm”。为什么脚本会“记住”它们原来的格式，却不让它们自己改变？

我自己的图表实际上与我在此处粘贴的示例图表相同。只是我从数据库中获取了我的 unixtimestamp，但即使我传递了示例中的数字，它也不起作用，所以我自己的代码不是问题。

我正在使用 chrome，如果您需要该信息，该页面由我的 raspberrypi 通过 apache 托管。

感谢所有可能提前帮助我的人！

【问题讨论】：

标签： javascript php html canvasjs

【解决方案1】：

您需要使用valueFormatString 定义值在出现在axisX 之前必须如何格式化，而xValueFormatString 定义在x 值出现在indexLabel 或之前必须如何格式化工具提示。

在您的情况下添加以下选项应该可以正常工作。

axisX: {
    valueFormatString: "HH:mm"
},

【讨论】：

非常感谢，没想到！