javascript - CanvasJS - 根据用户输入渲染时间线图表

我正在尝试修改 Rendering a Chart from User Input for CanvasJS 的示例。我希望 x 轴成为时间线。我觉得我走在正确的轨道上，但现在陷入了设置正确的时间输入的困境。代码是:

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);

我知道使用 new Date() 时存在问题，但不确定是什么。

这是一个codepen

如有任何帮助，我们将不胜感激!

最佳答案

如果您希望 x 轴显示添加数据的时间，请让 Date 函数不带任何参数。

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>

 $(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);

关于javascript - CanvasJS - 根据用户输入渲染时间线图表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59925691/

javascript - CanvasJS - 根据用户输入渲染时间线图表

上一篇：java - 文本字段中 int 的默认值

下一篇：java - 本地运行的 hibernate 与服务器上运行的 hibernate 之间的同步