Создание простой линейной диаграммы с высокими диаграммами - PullRequest
Новая
       1

Создание простой линейной диаграммы с высокими диаграммами

0 голосов
/ 06 июля 2018

У меня возникли некоторые трудности при создании линейной диаграммы с некоторыми данными временного ряда JSON, которые у меня есть. Мои данные JSON выглядят так: 

[{
  'close': 30.1361,
  'date': '2017-07-05'
}, {
  'close': 29.7583,
  'date': '2017-07-06'
}, {
  'close': 29.9326,
  'date': '2017-07-07'
}]

Кроме того, я обслуживаю свои веб-страницы через Django / Python, поэтому приведенные выше данные JSON хранятся в переменной, которая выглядит следующим образом: {{ one_yr|safe }}

В настоящее время у меня есть пустой график с числами 0-140 по оси Y и ничего по оси X, без графика. Пока мой код выглядит так: 

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Django Highcharts Example</title>
</head>
<body>
  <div id="container"></div>
  <script src="https://code.highcharts.com/highcharts.src.js"></script>
  <script>
    Highcharts.chart('container', {
        chart: {
            type: 'line'
        },
        title: {
            text: 'One Year Stock Price'
        },
        series: [{
            name: '{{ stock.ticker }}',
            data: {{ one_yr|safe }}
        }]
    });
  </script>
</body>
</html>

Я надеюсь создать очень простой линейный график с датами на оси X и ценами на оси Y. Любая помощь будет высоко ценится, спасибо.

1 Ответ

0 голосов
/ 06 июля 2018

Вам необходимо преобразовать JSON для формата Highcharts, поскольку для Highcharts требуется как ось в объекте, так и дата и время в качестве метки времени UNIX.

Вам также необходимо добавить тип даты и времени в ваш xAxis.

Моя скрипка: https://jsfiddle.net/1ro6hqy8/

var one_yr = [{
  'close': 30.1361,
  'date': '2017-07-05'
}, {
  'close': 29.7583,
  'date': '2017-07-06'
}, {
  'close': 29.9326,
  'date': '2017-07-07'
}]

one_yr = one_yr.map(function(e) {
  return {
    'y': e.close,
    'x': new Date(e.date).getTime()
  }
})

Highcharts.chart('container', {
  title: {
    text: 'One Year Stock Price'
  },
  xAxis: {
    type: 'datetime',
    dateTimeLabelFormats: {
      day: '%e of %b'
    }
  },
  series: [{
    data: one_yr
  }]
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...