Как заменить оси X нашими собственными данными временных меток из API в Highcharts, используя highstocks - PullRequest
Новая
       10

Как заменить оси X нашими собственными данными временных меток из API в Highcharts, используя highstocks

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

Я впервые использую старшие чарты. Я немного растерялся, потому что в прошлый раз использовал Chart. js. Я хочу, чтобы моя диаграмма могла отображать данные за месяц, неделю, год и день. И я хочу, чтобы у него был DatePicker. Поэтому я пытаюсь найти пример. И наконец я делаю свое. Но нет возможности показать мои данные за неделю и день. И оси X графика не из моих собственных данных. Как я могу заставить свои оси X использовать свои собственные данные API метки времени? А как изменить опцию показа данных за день, неделю и месяц?

Это мой код: https://jsfiddle.net/estri012/y1usoxd7/6/

Кто-нибудь, пожалуйста, помогите мне. Я новичок ie программист и до сих пор много проблем с программированием. Но это для моей школьной задачи. Так что мне нужно закончить это. Спасибо! 

<script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/data.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>


<div id="container" style="height: 400px"></div>

Highcharts.getJSON('https://gmlews.com/api/data', function (data) {
console.log(data);
var accelero_x = [], timestamp = [];
      for (var i=0; i<data.length; i++){
        accelero_x.push(data[i].accelero_x);
        timestamp.push(data[i].timestamp);
     }
      console.log(accelero_x);
      console.log(timestamp); 
// Create the chart
Highcharts.stockChart('container', {

    rangeSelector: {
        selected: 1
    },

    title: {
        text: 'Accelero X'
    },


    series: [{
        name: 'Accelero X',
        data: accelero_x,
        type: 'spline',
        tooltip: {
            valueDecimals: 2
        }
    }]
 });
 });

Ответы [ 2 ]

1 голос
/ 28 апреля 2020

Идея использования высокоуровневой биржевой диаграммы заключается в том, что в качестве метки времени используется метка оси X.

Решением вопроса «Как сделать так, чтобы оси X использовали мои собственные данные API метки времени?», Следует преобразовать данные [ i] .timestamp путем анализа реальной отметки времени, создания вложенного массива 'accelero_x' и передачи этого массива в последовательные данные. 

Highcharts.getJSON('https://gmlews.com/api/data', function (data) {
console.log(data);
var accelero_x = [], timestamp = [];
      for (var i=0; i<data.length; i++){
      //modification start -----
      let inArr = [];
      let trimDate = data[i].timestamp.split('T')[0]; // here we have many ways to extract only the date correctly
      inArr.push(Date.parse(trimDate));
      inArr.push(data[i].accelero_x);
        accelero_x.push(inArr);
      //modification end -----
        timestamp.push(data[i].timestamp);
     }
      console.log(accelero_x);
      console.log(timestamp); 
// Create the chart
Highcharts.stockChart('container', {

    rangeSelector: {
        selected: 1
    },

    title: {
        text: 'Accelero X'
    },


    series: [{
        name: 'Accelero X',
        data: accelero_x,
        type: 'spline',
        tooltip: {
            valueDecimals: 2
        }
    }]
 });
 });

Демо: https://jsfiddle.net/jinny/jrhz3ty7/20/

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

  • Ниже приведены параметры API для настройки параметров выбора диапазона: https://api.highcharts.com/highstock/rangeSelector.buttons

  • Ваша вторая часть вопроса - Для Highcharts требуются данные в следующих форматах:

    • массив значений - например: [10,20,30,40] - Highcharts считывает их как массив значений y и устанавливает значения по умолчанию x - 1, 2, 3, 4

    • массив массивов - например: [[3, 24], [5, 42], [8,33]] - где первое значение в массиве является x, а второе - y - [x, y]

    • массив объектов - например: [{x: 3, y: 24}, {x: 5, y: 42}] - здесь совершенно очевидно

xAxis может быть типом времени данных, где значение x является значением в миллисекундах формат, это означает, что вам нужно будет преобразовать ваши данные в миллисекунды, чтобы установить их, как здесь: https://jsfiddle.net/BlackLabel/w9hznsey/

...