CanvasJS - 从用户输入渲染时间线图答案

【问题标题】：CanvasJS - Render timeline Chart from User InputCanvasJS - 从用户输入渲染时间线图
【发布时间】：2020-01-27 05:48:59
【问题描述】：

我正在尝试修改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

任何帮助将不胜感激！

【问题讨论】：

标签： javascript timeline canvasjs

【解决方案1】：

如果你想让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>

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

【讨论】：

我希望用户能够在任何时候添加，而不仅仅是现在
收到错误TypeError: undefined is not an object (evaluating '$('#xValue').data("DateTimePicker").date');