Canvas JS - Визуализация графика временной шкалы из пользовательского ввода - PullRequest
Новая
       78

Canvas JS - Визуализация графика временной шкалы из пользовательского ввода

4 голосов
/ 27 января 2020

Я пытаюсь изменить пример Визуализация диаграммы из пользовательского ввода для Canvas JS. Я хочу, чтобы ось х была временной шкалой. Я чувствую, что нахожусь на правильном пути, но теперь застрял в установке правильного ввода времени. Код: 

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

Любая помощь будет оценена!

1 Ответ

0 голосов
/ 27 января 2020

Если вы хотите, чтобы на оси х отображалось время добавления данных, используйте функцию «Оставить дату» без аргументов. 

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>

JS 

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