Как использовать электронные чарты для отображения дневного графика акций в сочетании с квартальным графиком данных о доходах

Question

У меня есть два набора данных, которые я хочу отобразить на холсте eCharts в виде двух отдельных линейных диаграмм:

1. квартальный график выручки и
2. дневной график цены акций.

Используя приведенный ниже код, отображаются обе линейные диаграммы, но поскольку наборы данных имеют разную длину массива, линейный график выручки втискивается в левую часть холста, а график цены акций отображается правильно во всю ширину. , Кроме того, оси X не выровнены друг с другом, потому что диапазоны дат не полностью перекрываются (квартальные данные начинаются раньше, чем данные о ценах, см. Пример ниже).

Первый длинный набор данных, содержащий ежедневно цены акций, выглядит следующим образом:

    var dailyStockprices = [123,124,125, ... etc] // array length 600
    var dailyDates = ["2019-01-02","2019-01-03","2019-01-04", ... etc] // array length 600

Второй, очень короткий набор данных, содержащий квартальные доходы, выглядит следующим образом:

    var quarterlyRevenues = [123,124,125, ... etc]  // array length 20
    var quarterlyDates = ["2018-09-30","2018-12-31","2019-03-31", ... etc] // array length 20

Код eCharts выглядит следующим образом:

    var myChart = echarts.init(document.getElementById('mainchart1'));

    option = {
      xAxis: [{
        type: 'category',
        data: dailyDates
      }, {
        type: 'category',
        data: quarterlyDates
      }],
      yAxis: [{
        type: 'value'
      }, {
        type: 'value'
      }],
      series: [{
        data: dailyStockprices,
        type: 'line',
        yAxisIndex: 0
      }, {
        data: quarterlyRevenues,
        type: 'line',
        yAxisIndex: 1
      }]
    };
    myChart.setOption(option);

Вот упрощенный пример JSFiddle: https://jsfiddle.net/frankmarks/szm1f20j/9/

Как сделать так, чтобы обе линейные диаграммы отображались правильно, то есть на полную ширину, на одном и том же холсте с выравниванием обеих осей X?

Answer 1

После некоторых исследований я нашел решение, состоящее в том, чтобы установить тип оси на «время» вместо «категория», который автоматически выравнивает выравнивание оси и полностью отвечает на мой вопрос.

Дальнейшее объяснение того, как форматировать данные, дано в документации eCharts здесь: https://ecomfe.github.io/echarts-doc/public/en/option.html#series.data

Выдержка:

Когда измерение соответствуетдля оси времени (тип «время») значение может быть:

• отметка времени, например 1484141700832, которая представляет время UTC.
• строка даты в одном из приведенных ниже форматов: только подмножество ISO 8601 (включая все они обрабатываются как местное время, если не указан часовой пояс, соответствующий моменту): только часть года/ месяц / дата / время указываются: «2012-03-01», «2012-03-01», «2012-03-01 05», «2012-03-01 05:06».разделенные «Т» или пробелом: «2012-03-01T12: 22: 33.123», «2012-03-01 12: 22: 33.123».
• указанный часовой пояс: '2012-03-01T12: 22: 33Z', '2012-03-01T12: 22: 33 + 8000', '2012-03-01T12: 22: 33-05: 00',
• другой формат строки даты (все они обрабатываются как местное время): '2012', '2012-3-1', '2012/3/1', '2012/03/01', '2009/6/12 2:00 ',' 2009/6/12 2:05:08 ',' 2009/6/12 2: 05: 08.123 '.
• экземпляр JavaScript Date, созданный пользователем: Внимание, при использовании строки данных для создания экземпляра Date следует учитывать различия и несоответствия браузера.

Например: в Chromeновая Дата ('2012-01-01') рассматривается как 1 января 2012 года в UTC, тогда как новая Дата ('2012-1-1') и новая Дата ('2012/01/01') рассматриваются как 1 января2012 в местном часовом поясе.В сафари новая Дата ('2012-1-1') не поддерживается.

Так что, если вы намереваетесь выполнить новую дату (dateString), настоятельно рекомендуется использовать библиотеку анализа времени (например, момент)или используйте echarts.number.parseDate.