Javascript CanvasJS-根据用户输入渲染时间线图
我正在尝试修改一个示例。我希望x轴是一个时间轴。我觉得我走在正确的轨道上,但现在却被困在设置正确的时间输入上。 代码是:Javascript CanvasJS-根据用户输入渲染时间线图,javascript,timeline,canvasjs,Javascript,Timeline,Canvasjs,我正在尝试修改一个示例。我希望x轴是一个时间轴。我觉得我走在正确的轨道上,但现在却被困在设置正确的时间输入上。 代码是: var dps = []; //dataPoints. var chart = new CanvasJS.Chart("chartContainer", { title: { text: "DataPoints from User Input" }, axisX: { valu
var dps = []; //dataPoints.
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "DataPoints from User Input"
},
axisX: {
valueFormatString: "HH:mm",
labelAngle: -50
},
axisY: {
valueFormatString: "###"
},
color: "#F08080",
data: [{
type: "line",
xValueFormatString: "HH:mm",
dataPoints: dps
}]
});
function addDataPointsAndRender() {
xValue = Number(document.getElementById("xValue").value);
yValue = Number(document.getElementById("yValue").value);
dps.push({
x: new Date(xValue),
y: yValue
});
chart.render();
}
var renderButton = document.getElementById("renderButton");
renderButton.addEventListener("click", addDataPointsAndRender);
我知道使用newdate()
时有问题,但不确定是什么问题
这是一个
任何帮助都将不胜感激 如果希望x轴显示添加数据的时间,请将日期函数保留为不带任何参数
x: new Date(),
如果希望用户选择时间:
HTML
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<title>Document</title>
</head>
<body>
X Value:
<div class='input-group date' id='xValue'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<input id="yValue" type="number" step="any" placeholder="Enter Y-Value">
<button id="renderButton">Add DataPoint & Render</button>
<div id="chartContainer" style="height: 370px; max-width: 920px; margin: 0px auto;">
</div>
</body>
</html>
我希望用户能够随时添加所需的数据,而不仅仅是现在获取错误
TypeError:undefined不是对象(计算“$”(“#xValue”).data(“DateTimePicker”).date”)代码>
$(document).ready(function(){
$('#xValue').datetimepicker();
})
var dps = []; //dataPoints.
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "DataPoints from User Input"
},
axisX:{
valueFormatString: "HH:mm" ,
labelAngle: -50
},
axisY: {
valueFormatString: "###"
},
color: "#F08080",
data: [{
type: "line",
xValueFormatString: "HH:mm",
dataPoints: dps
}]
});
function addDataPointsAndRender() {
var date = $('#xValue').data("DateTimePicker").date();
yValue = Number(document.getElementById("yValue").value);
dps.push({
x: new Date(date.unix()*1000),
y: yValue
});
chart.render();
}
var renderButton = document.getElementById("renderButton");
renderButton.addEventListener("click", addDataPointsAndRender);