Диаграмма. js разных временных наборов - PullRequest
Новая
       25

Диаграмма. js разных временных наборов

0 голосов
/ 02 апреля 2020

Я хочу нанести на график свои показания температуры моего термостата DIY и состояние нагревателя, используя таблицу. js. Состояние нагревателя равно 0 или 1, но я сохранил его в минимальном представлении: у меня есть только значения, когда он включается / выключается. Время нагрева никогда не равно времени измерения, но между ними.

Я хочу нанести данные времени на одну и ту же ось времени x. По крайней мере, из 20 примеров, вопросов здесь и других ресурсов я собрал эту скрипку , что является моим лучшим предположением. Тем не менее, я не могу разумно построить как оси времени, так и их данные. Если я уменьшу его до числовых данных по оси x в очень упрощенном примере, я получу меньший набор данных, нанесенный на график для первых нескольких значений x последнего.

Код js: 1007 * 

var options = {
  type: 'line',
  data: {
    labels: ["2018-12-07 08:45:17", 
    "2018-12-07 09:30:17", "2018-12-07 10:15:16", 
    "2018-12-07 11:00:17", "2018-12-07 14:45:16"],
    datasets: [
        {
          label: '1st line',
          data: [12, 19, 7, 9, 10, 8],
        },  
            {
          steppedLine: 'before',
          xAxisID: 'x-axis-2',
          label: '2nd line',
          data: [                       
          {
            x: "2018-12-07 09:15:47",
            y: 3
          }, {
            x: "2018-12-07 10:55:25",
            y: 5
          }, {
            x: "2018-12-07 13:05:00",
            y: 3
          }],
        }
     ]
  },
  options: {
    scales: {
      xAxes: [{}, {
        id: 'x-axis-2',
        type: 'linear',
        position: 'bottom',
        //display: false,
      }],
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

1 Ответ

0 голосов
/ 03 апреля 2020

Во-первых, вы можете использовать уникальный xAxis и определить его как время декартовой оси . 

xAxes: [{
  type: 'time',
  time: {
    unit: 'second'
  }
}]

Также вы не должны предоставлять data.labels, а вместо этого определять каждую точку данных , используя объект, содержащий свойства x и y. 

var options = {
  type: 'line',
  data: {
    datasets: [{
        label: '1st line',
        data: [{
            x: "2018-12-07 08:45:17",
            y: 12
          },
          {
            x: "2018-12-07 09:30:17",
            y: 19
          },
          {
            x: "2018-12-07 10:15:16",
            y: 7
          },
          {
            x: "2018-12-07 11:00:17",
            y: 9
          },
          {
            x: "2018-12-07 14:45:16",
            y: 10
          }
        ]
      },
      {
        label: '2nd line',
        steppedLine: 'before',
        data: [{
            x: "2018-12-07 09:15:47",
            y: 3
          },
          {
            x: "2018-12-07 10:55:25",
            y: 5
          },
          {
            x: "2018-12-07 13:05:00",
            y: 3
          }
        ],
        backgroundColor: 'lightgreen'
      }
    ]
  },
  options: {
    scales: {
      xAxes: [{
        type: 'time',
        time: {
          unit: 'second'
        }
      }]
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="chartJSContainer" height="90"></canvas>
...