графики. js и отметка времени в качестве читаемой даты - PullRequest
Новая
       33

графики. js и отметка времени в качестве читаемой даты

0 голосов
/ 02 мая 2020

У меня есть некоторые данные с отметкой времени и целочисленным значением. Теперь я создал диаграмму рассеяния, поскольку мои временные метки не имеют одинаковую частоту, но значения берутся в случайное время. Отметка времени - это ось X, значение по оси Y. Теперь я хотел бы преобразовать метку времени в читаемый формат времени. Поэтому я включил моменты. Но я просто не могу заставить его отображать мою отформатированную строку времени. Он просто отображает некоторый формат по умолчанию, даже если я изменяю код. Как это работает? Этикетки введите описание изображения здесь

Вот мой код: 

    <script src="open/moment.js"></script>
<script src="open/Chart.min.js"></script>
<canvas id="hum1" style="width:1000px; height:500px;"></canvas>
<script>
	var x = new Chart(document.getElementById("hum1"), {
	   type: 'scatter',
	   data: {
		  datasets: [{
			 label: "Test",
			 pointStyle: 'line',
			 showLine: true,
			 fill: false,
			 borderColor: '#00ff00',
			 pointRadius: 0,
			 data: [],
		  },{
			 label: "Humidity 1",
			 showLine: true,
			 fill: true,
			 borderColor: '#0000FF',
			 pointRadius: 0,

			 data: [
			 
{x:1588353429.6027,y:400},
{x:1588353430.6634,y:0},
{x:1588353431.7241,y:0},
{x:1588353432.7848,y:0},
{x:1588353433.8455,y:400},
{x:1588353434.9062,y:400},
{x:1588353435.9668,y:400},
{x:1588353437.0274,y:400},
{x:1588353438.0881,y:400},
{x:1588353439.1487,y:400},
{x:1588353440.2093,y:400},
{x:1588353441.27,y:400},
{x:1588353442.3307,y:400},
{x:1588353443.3929,y:400},
{x:1588353444.4537,y:400},
{x:1588353445.5142,y:400},
{x:1588353723.1543,y:415},
{x:1588353724.216,y:0},
{x:1588353725.2782,y:0},
{x:1588353726.3402,y:0},
{x:1588353727.402,y:400},
{x:1588353728.463,y:400},
{x:1588353793.2418,y:415},
{x:1588353794.304,y:0},
{x:1588353795.3658,y:0},
{x:1588353796.4265,y:0},
{x:1588353797.4882,y:400},
{x:1588353798.5495,y:400},
{x:1588353799.6102,y:400},
{x:1588353800.6715,y:400},
{x:1588353801.7327,y:405},
{x:1588353802.7933,y:400},
{x:1588353803.8564,y:405},
{x:1588353804.9154,y:405},
{x:1588353805.9779,y:405},
{x:1588353807.0411,y:411},
			 
			 ],
		  }
		  ]
	   },
	   options: {
		  responsive: false,

		  legend: {
			position: 'bottom',
		  labels: {
			usePointStyle: true
         }
      },
		  
		          scales: {
                    xAxes: [{
							type: 'time',
							unit: 'minute',
							time:{
								displayFormats: {
									minute: 'HH:mm'
								}
							},
							ticks: {
								source: 'data',
								autoSkip: true

							},
                            display: true,
                            scaleLabel: {
                                display: true,
                                labelString: 'Timestamp'
                            }
                        }],
                    yAxes: [{
                            display: true,
                            ticks: {
                                beginAtZero: true,
                                steps: 10,
                                stepValue: 5,
                                max: 36282.75,
								min: 0 
                            },
                            scaleLabel: {
                                display: true,
                                labelString: 'Humidity [%]'
                            }

                        }]
                },
				title: {
                    display: true,
                    text: 'Filament hub 1'
                }
		  
	   }
	});
</script>

1 Ответ

0 голосов
/ 03 мая 2020

Основная проблема заключается в том, что ваши временные метки имеют значение Unix (количество секунд с момента 1 January 1970 UTC). Однако объект JavaScript Date использует миллисекунды, начиная с 1 January 1970 UTC. Поэтому вы должны умножить свои временные метки на 1000, чтобы присвоить data конфигурации диаграммы. 

data.forEach((o) => o.x *= 1000);

Я также немного изменил определение xAxes следующим образом: 

xAxes: [{
    type: 'time',        
    time: {
      unit: 'minute',
      displayFormats: {
        minute: 'HH:mm'
      },
      tooltipFormat: 'HH:mm'
    },
    scaleLabel: {
      labelString: 'Timestamp'
    }
  }],

Пожалуйста, посмотрите на ваш исправленный код ниже. 

const data = [
  {x:1588353429.6027,y:400},
  {x:1588353430.6634,y:0},
  {x:1588353431.7241,y:0},
  {x:1588353432.7848,y:0},
  {x:1588353433.8455,y:400},
  {x:1588353434.9062,y:400},
  {x:1588353435.9668,y:400},
  {x:1588353437.0274,y:400},
  {x:1588353438.0881,y:400},
  {x:1588353439.1487,y:400},
  {x:1588353440.2093,y:400},
  {x:1588353441.27,y:400},
  {x:1588353442.3307,y:400},
  {x:1588353443.3929,y:400},
  {x:1588353444.4537,y:400},
  {x:1588353445.5142,y:400},
  {x:1588353723.1543,y:415},
  {x:1588353724.216,y:0},
  {x:1588353725.2782,y:0},
  {x:1588353726.3402,y:0},
  {x:1588353727.402,y:400},
  {x:1588353728.463,y:400},
  {x:1588353793.2418,y:415},
  {x:1588353794.304,y:0},
  {x:1588353795.3658,y:0},
  {x:1588353796.4265,y:0},
  {x:1588353797.4882,y:400},
  {x:1588353798.5495,y:400},
  {x:1588353799.6102,y:400},
  {x:1588353800.6715,y:400},
  {x:1588353801.7327,y:405},
  {x:1588353802.7933,y:400},
  {x:1588353803.8564,y:405},
  {x:1588353804.9154,y:405},
  {x:1588353805.9779,y:405},
  {x:1588353807.0411,y:411}
];
data.forEach((o) => o.x *= 1000); 

new Chart(document.getElementById("hum1"), {
  type: 'scatter',
  data: {
    datasets: [{
      label: "Humidity 1",
      pointStyle: 'line',
      showLine: true,
      fill: false,
      borderColor: '#0000FF',
      pointRadius: 0,
      data: data 
    }]
  },
  options: {
    responsive: false,
    legend: {
      position: 'bottom',
      labels: {
        usePointStyle: true
      }
    },
    scales: {
      xAxes: [{
        type: 'time',        
        time: {
          unit: 'minute',
          displayFormats: {
            minute: 'HH:mm'
          },
          tooltipFormat: 'HH:mm'
        },
        scaleLabel: {
          display: true,
          labelString: 'Timestamp'
        }
      }],
      yAxes: [{
        display: true,
        ticks: {
          beginAtZero: true,
          steps: 10,
          stepValue: 5,
          min: 0
        },
        scaleLabel: {
          display: true,
          labelString: 'Humidity [%]'
        }
      }]
    },
    title: {
      display: true,
      text: 'Filament hub 1'
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="hum1" style="width:600px; height:230px;"></canvas>
...