Fatal编程技术网
  • javascript/
  • Javascript CanvasJS:xValueFormatString根本不起任何作用

Javascript CanvasJS:xValueFormatString根本不起任何作用

javascript php html

Javascript CanvasJS:xValueFormatString根本不起任何作用,javascript,php,html,canvasjs,Javascript,Php,Html,Canvasjs,所以，我偶然发现了一个我似乎无法克服的非常恼人的问题。我一直在尝试制作一张图表，显示一天中温度的变化 所有这些都没有那么棘手，但我无法格式化从PHP传递到脚本的日期时间字符串。经过一些尝试和错误，我想，我只需要下载另一个例子，并从那里尝试 `<?php $dataPoints = array( array("x" => 1512441720000 , "y" => array(120, 78)), array("x" => 1512447240000

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

所有这些都没有那么棘手，但我无法格式化从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>`

`
window.onload=函数（）{
var chart=new CanvasJS.chart（“chartContainer”{
animationEnabled：没错，
标题：{
正文：“一天内的血压读数”
},
axisY：{
标题：“压力（单位：毫米汞柱）”，
网格厚度：0
},
数据：[{
键入：“牧场面积”，
xValueType:“日期时间”，
yValueFormatString:“#，##0 mmHg”，
toolTipContent:“{x}
收缩：{y[0]}
舒张：{y[1]}”，
数据点：
}]
});
chart.render（）；
}
`
这东西很好用。请注意，这里没有“xValueFormatString”。原始版本有一个如下所示：“xValueFormatString:”hh:MM TT“，因此x轴上的时间戳显示从00到12的小时和从00到59的分钟以及am或pm。我想把它改成“HH:mm”。它什么也没做，像以前一样。现在我已经删除了它，它仍然是一样的。现在是什么告诉图形这样格式化x轴的？我认为没什么。那么，为什么它保持不变呢

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

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

我使用的是chrome，如果您需要这些信息，该页面由我的raspberrypi通过apache托管

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

您需要使用定义值在出现在axisX上之前必须如何格式化，而定义值在出现在索引标签或工具提示上之前必须如何格式化

在您的情况下，添加以下选项应该可以很好地工作

axisX: {
    valueFormatString: "HH:mm"
},
您需要使用定义值在显示在axisX上之前必须如何格式化，而定义值在显示在索引标签或工具提示上之前必须如何格式化

在您的情况下，添加以下选项应该可以很好地工作

axisX: {
    valueFormatString: "HH:mm"
},
太谢谢你了，没想到！太谢谢你了，没想到！