отметка времени одного массива как xAxis для нескольких серий

Question

Я новичок в Java скрипте и хай-чартах. Как я могу поместить метку времени в отдельный общий массив для всех серий?

вот так:

 xAxis: { 
        data: [1577203210, 1577206808, 1577210408]
        }

       series: [{
                    name: 'one',
                    data: [1, 21, 8],
                },
                {
                    name: 'two',
                    data: [2,4,6],
                }]

что у меня сейчас

Highcharts.stockChart('container', {
  title: {
    text: 'Stock Price'
  },
  series: [{
      name: 'one',
      data: [
        [1577203210, 1],
        [1577206808, 21],
        [1577210408, 8],
      ],
    },
    {
      name: 'two',
      data: [
        [1577203210, 2],
        [1577206808, 4],
        [1577210408, 6],
      ],
    }
  ]
});

<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; min-width: 310px"></div>

Lorem ipsum dolor sit amet, consitteur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud упражнение ullamco labouris nisi ut aliquip ex ea кассовый следствие. Duis aute irure dolor в репереендерите в завитке Velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat непроизведенный, иск в виновном виновнике, молли аним, то есть лейборист.

Answer 1

1. Вы можете использовать функцию xAxis.categories , чтобы назначить этот массив xAxis, но функция категорий доступна только для Highcharts (не Highstock), однако вы должны иметь возможность объединять параметры из От Highstock к Highcharts используя скрипт Highstock. Недостатком этого решения является то, что метки и всплывающая подсказка получают эти значения в числовом формате, а не во времени данных.

Демонстрация: https://jsfiddle.net/BlackLabel/ye1rxw49/

    let timestamp = [1577203210, 1577206808, 1577210408];

    Highcharts.chart('container', {
      title: {
        text: 'Stock Price'
      },

      xAxis: {
        categories: timestamp
      },
      ...
    });

Чтобы отобразить значения x во время данных, вам необходимо использовать некоторую функцию разбора, например, здесь:

Демонстрация: https://jsfiddle.net/BlackLabel/2j3yswn5/

let categoriesTimeStamp = timestamp.map((val) => new Date(val).toUTCString())

Однако это решение все еще не идеально, потому что rangeSelector плохо работает с категорией ie - вы можете видеть, что диапазон составляет от 1 января 1970 г. до 1 января 1970 г., а метки - 19 января.

Я думаю, что лучшим подходом будет создание некоторой функции синтаксического анализа, которая объединит ваши данные и массивы данных xAxis.

Примерно так: https://jsfiddle.net/BlackLabel/woht0vpk/

let data1 = [1, 21, 8],
        data2 = [2,4,6],
    xAxisData = [1577203210, 1577206808, 1577210408];

 data1 = data1.map((val, i) => [xAxisData[i], val])
 data2 = data2.map((val, i) => [xAxisData[i], val])