Диаграмма JS с датами по оси X, без графика - PullRequest
Новая
       46

Диаграмма JS с датами по оси X, без графика

0 голосов
/ 10 июля 2020

У меня есть проект Vue. JS, получающий данные из REST API (мой, поэтому я могу изменить его при необходимости). Эти данные отформатированы для диаграммы. JS. Я должен отображать график с 3 наборами данных, 2 строки типа с одинаковыми значениями X, но 1 строка типа с разными значениями X (поэтому я не хочу указывать метки). Как бы то ни было, все значения X являются датами, поэтому я хотел бы только 1 ось X для всех кривых.

Я использую наборы данных с форматом данных (x, y):

  • x - это дата ISO8601
  • y - это число с плавающей запятой

Моя проблема в том, что НИЧЕГО не отображается вообще ... может кто-нибудь мне помочь, я не понимаю почему. Я чувствую, что все сделал правильно. Где-то видел, что нужно включить момент js, но в официальной документации говорят, что это не так. Бьюсь об заклад, что проблемы возникают из-за дат, потому что я пытался изменить значения y, а границы оси 2 y изменены (так что значения y понятны). Я также пробовал добавить опцию «xAxisID», ничего не изменилось.

Вот образец моих данных (обычно сотни значений): 

{
  "type": "line",
  "data": {
    "datasets": [
      {
        "label": "Température",
        "borderColor": "red",
        "backgroundColor": "red",
        "fill": false,
        "data": [
          {
            "x": "2020-07-05T15:38:47.933711",
            "y": 2.8224692
          },
          {
            "x": "2020-07-05T15:48:47.490669",
            "y": 33.63129
          },
          {
            "x": "2020-07-05T15:58:48.182698",
            "y": 40.540405
          },
          {
            "x": "2020-07-05T16:08:47.829882",
            "y": 3.0312533
          },
          {
            "x": "2020-07-05T16:18:47.489026",
            "y": 49.145626
          }
        ],
        "yAxisID": "yAxeTemperature"
      },
      {
        "label": "Humidité",
        "borderColor": "blue",
        "backgroundColor": "blue",
        "fill": false,
        "data": [
          {
            "x": "2020-07-05T15:38:47.933711",
            "y": 33.980587
          },
          {
            "x": "2020-07-05T15:48:47.490669",
            "y": 2.0313625
          },
          {
            "x": "2020-07-05T15:58:48.182698",
            "y": 24.249685
          },
          {
            "x": "2020-07-05T16:08:47.829882",
            "y": 7.4426904
          },
          {
            "x": "2020-07-05T16:18:47.489026",
            "y": 2.6335742
          },
          {
            "x": "2020-07-05T16:28:48.175547",
            "y": 25.92827
          }
        ],
        "yAxisID": "yAxeHumidite"
      }
    ]
  },
  "options": {
    "responsive": true,
    "hoverMode": "index",
    "stacked": false,
    "title": null,
    "scales": {
      "xAxes": [
        {
          "type": "time",
          "display": true,
          "position": "bottom",
          "id": "xAxeTime",
          "scaleLabel": {
            "display": true,
            "labelString": "Temps",
            "fontColor": "black"
          },
          "time": {
            "unit": "minute",
            "parser": "moment.ISO_8601",
            "tooltipFormat": "ll"
          }
        }
      ],
      "yAxes": [
        {
          "type": "linear",
          "display": true,
          "position": "left",
          "id": "yAxeTemperature",
          "scaleLabel": {
            "display": true,
            "labelString": "Température",
            "fontColor": "red"
          }
        },
        {
          "type": "linear",
          "display": true,
          "position": "left",
          "id": "yAxeHumidite",
          "scaleLabel": {
            "display": true,
            "labelString": "Humidité",
            "fontColor": "blue"
          }
        }
      ]
    }
  }
}

Вот как создается моя диаграмма ( используя vue -график js и диаграмму. js): 

createChart(chartId : string, chartData : GrapheBean) {
      const ctx = document.getElementById(chartId);
      // @ts-ignore
      const myChart = new Chart(ctx, {
        type: chartData.type,
        data: chartData.data,
        options: chartData.options,
      });
    }

Вот результат:

введите описание изображения здесь

Я сейчас застрял, даже если все еще пытаюсь что-то сделать без особой надежды. Заранее большое спасибо тем, кто смог мне помочь.

1 Ответ

1 голос
/ 11 июля 2020

Сначала удалите опцию xAxes.time.parser. Это не требуется, если даты имеют формат ISO8601.

Дополнительная диаграмма. js эффективно внутренне использует момент. js для функций оси времени . Поэтому вам следует использовать объединенную версию Chart. js, которая включает Moment. js в одном файле.

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

const chartData = {
  "type": "line",
  "data": {
    "datasets": [{
        "label": "Température",
        "borderColor": "red",
        "backgroundColor": "red",
        "fill": false,
        "data": [{
            "x": "2020-07-05T15:38:47.933711",
            "y": 2.8224692
          },
          {
            "x": "2020-07-05T15:48:47.490669",
            "y": 33.63129
          },
          {
            "x": "2020-07-05T15:58:48.182698",
            "y": 40.540405
          },
          {
            "x": "2020-07-05T16:08:47.829882",
            "y": 3.0312533
          },
          {
            "x": "2020-07-05T16:18:47.489026",
            "y": 49.145626
          }
        ],
        "yAxisID": "yAxeTemperature"
      },
      {
        "label": "Humidité",
        "borderColor": "blue",
        "backgroundColor": "blue",
        "fill": false,
        "data": [{
            "x": "2020-07-05T15:38:47.933711",
            "y": 33.980587
          },
          {
            "x": "2020-07-05T15:48:47.490669",
            "y": 2.0313625
          },
          {
            "x": "2020-07-05T15:58:48.182698",
            "y": 24.249685
          },
          {
            "x": "2020-07-05T16:08:47.829882",
            "y": 7.4426904
          },
          {
            "x": "2020-07-05T16:18:47.489026",
            "y": 2.6335742
          },
          {
            "x": "2020-07-05T16:28:48.175547",
            "y": 25.92827
          }
        ],
        "yAxisID": "yAxeHumidite"
      }
    ]
  },
  "options": {
    "responsive": true,
    "hoverMode": "index",
    "stacked": false,
    "title": null,
    "scales": {
      "xAxes": [{
        "type": "time",
        "display": true,
        "position": "bottom",
        "id": "xAxeTime",
        "scaleLabel": {
          "display": true,
          "labelString": "Temps",
          "fontColor": "black"
        },
        "time": {
          "unit": "minute",
          // "parser": "moment.ISO_8601", -> remove this line
          "tooltipFormat": "ll"
        }
      }],
      "yAxes": [{
          "type": "linear",
          "display": true,
          "position": "left",
          "id": "yAxeTemperature",
          "scaleLabel": {
            "display": true,
            "labelString": "Température",
            "fontColor": "red"
          }
        },
        {
          "type": "linear",
          "display": true,
          "position": "left",
          "id": "yAxeHumidite",
          "scaleLabel": {
            "display": true,
            "labelString": "Humidité",
            "fontColor": "blue"
          }
        }
      ]
    }
  }
}

const ctx = document.getElementById('myChart');
const myChart = new Chart(ctx, {
  type: chartData.type,
  data: chartData.data,
  options: chartData.options,
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="myChart" height="120"></canvas>

В вашем вопросе вы также написали «Я должен отображать график с 3 наборами данных, 2 строки типа с тем же X значения, но 1 типа bar с разными значениями X ". Однако ваш код определяет только 2 набора данных. Если вы также столкнулись с проблемами в этом вопросе, задайте новый вопрос по этой отдельной проблеме.

...