Highcharts two datetime xAxis chart с таким же интервалом тиков

Я два дня думаю о проблеме, но я не знаю, что делать с двумя нормализованными datetime xAxis.Highcharts two datetime xAxis chart с таким же интервалом тиков

Я пробовал использовать linkedTo и нормализовать массивы данных (но это тяжелое переполнение).
linkedTo показывает только перекрывающиеся данные.
Без linkedTo и нормализации массивов, тиков показал, как асинхронная, как это

Помогите мне, пожалуйста,

What make chart like this?

$('#container').highcharts({ 
 
    yAxis: { 
 
     gridLineWidth:0 
 
    }, 
 
    xAxis: [ 
 
     { 
 
     gridLineWidth: 1, 
 
     type: 'datetime', 
 
     lineColor: '#ff9c00' 
 
     }, 
 
     { 
 
     type: 'datetime', 
 
     opposite: true, 
 
     lineColor: '#FF6B6B' 
 
     } 
 
    ], 
 
    series: [ 
 
     { 
 
      "name": "first", 
 
      "data": [ 
 
       [ 
 
        1479164400000, 
 
        7323 
 
       ], 
 
       [ 
 
        1479160800000, 
 
        6204 
 
       ], 
 
       [ 
 
        1479157200000, 
 
        3561 
 
       ], 
 
       [ 
 
        1479153600000, 
 
        9706 
 
       ], 
 
       [ 
 
        1479150000000, 
 
        2539 
 
       ], 
 
       [ 
 
        1479146400000, 
 
        4570 
 
       ], 
 
       [ 
 
        1479142800000, 
 
        4187 
 
       ], 
 
       [ 
 
        1479139200000, 
 
        3631 
 
       ], 
 
       [ 
 
        1479135600000, 
 
        7512 
 
       ], 
 
       [ 
 
        1479132000000, 
 
        2456 
 
       ], 
 
       [ 
 
        1479128400000, 
 
        6983 
 
       ], 
 
       [ 
 
        1479124800000, 
 
        3511 
 
       ], 
 
       [ 
 
        1479121200000, 
 
        2765 
 
       ], 
 
       [ 
 
        1479117600000, 
 
        3401 
 
       ], 
 
       [ 
 
        1479114000000, 
 
        2565 
 
       ], 
 
       [ 
 
        1479110400000, 
 
        4425 
 
       ], 
 
       [ 
 
        1479106800000, 
 
        4592 
 
       ], 
 
       [ 
 
        1479103200000, 
 
        4328 
 
       ], 
 
       [ 
 
        1479099600000, 
 
        2694 
 
       ], 
 
       [ 
 
        1479096000000, 
 
        2787 
 
       ], 
 
       [ 
 
        1479092400000, 
 
        11633 
 
       ], 
 
       [ 
 
        1479088800000, 
 
        3311 
 
       ], 
 
       [ 
 
        1479085200000, 
 
        2839 
 
       ], 
 
       [ 
 
        1479081600000, 
 
        12620 
 
       ] 
 
      ] 
 
     }, 
 
     { 
 
      "name": "second", 
 
      "data": [ 
 
       [ 
 
        1479250800000, 
 
        22730 
 
       ], 
 
       [ 
 
        1479247200000, 
 
        10695 
 
       ], 
 
       [ 
 
        1479243600000, 
 
        12017 
 
       ], 
 
       [ 
 
        1479240000000, 
 
        12110 
 
       ], 
 
       [ 
 
        1479236400000, 
 
        9689 
 
       ], 
 
       [ 
 
        1479232800000, 
 
        4288 
 
       ], 
 
       [ 
 
        1479229200000, 
 
        3702 
 
       ], 
 
       [ 
 
        1479225600000, 
 
        5575 
 
       ], 
 
       [ 
 
        1479222000000, 
 
        5694 
 
       ], 
 
       [ 
 
        1479218400000, 
 
        3098 
 
       ], 
 
       [ 
 
        1479214800000, 
 
        9885 
 
       ], 
 
       [ 
 
        1479211200000, 
 
        6587 
 
       ], 
 
       [ 
 
        1479207600000, 
 
        3028 
 
       ], 
 
       [ 
 
        1479204000000, 
 
        3281 
 
       ], 
 
       [ 
 
        1479200400000, 
 
        12577 
 
       ], 
 
       [ 
 
        1479196800000, 
 
        3886 
 
       ], 
 
       [ 
 
        1479193200000, 
 
        4014 
 
       ], 
 
       [ 
 
        1479189600000, 
 
        6553 
 
       ], 
 
       [ 
 
        1479186000000, 
 
        2041 
 
       ], 
 
       [ 
 
        1479182400000, 
 
        4056 
 
       ], 
 
       [ 
 
        1479178800000, 
 
        4223 
 
       ], 
 
       [ 
 
        1479175200000, 
 
        4920 
 
       ], 
 
       [ 
 
        1479171600000, 
 
        5432 
 
       ], 
 
       [ 
 
        1479168000000, 
 
        7857 
 
       ], 
 
       [ 
 
        1479164400000, 
 
        7323 
 
       ], 
 
       [ 
 
        1479160800000, 
 
        6204 
 
       ], 
 
       [ 
 
        1479157200000, 
 
        3561 
 
       ], 
 
       [ 
 
        1479153600000, 
 
        9706 
 
       ], 
 
       [ 
 
        1479150000000, 
 
        2539 
 
       ], 
 
       [ 
 
        1479146400000, 
 
        4570 
 
       ], 
 
       [ 
 
        1479142800000, 
 
        4187 
 
       ], 
 
       [ 
 
        1479139200000, 
 
        3631 
 
       ], 
 
       [ 
 
        1479135600000, 
 
        7512 
 
       ], 
 
       [ 
 
        1479132000000, 
 
        2456 
 
       ], 
 
       [ 
 
        1479128400000, 
 
        6983 
 
       ], 
 
       [ 
 
        1479124800000, 
 
        3511 
 
       ], 
 
       [ 
 
        1479121200000, 
 
        2765 
 
       ], 
 
       [ 
 
        1479117600000, 
 
        3401 
 
       ], 
 
       [ 
 
        1479114000000, 
 
        2565 
 
       ], 
 
       [ 
 
        1479110400000, 
 
        4425 
 
       ], 
 
       [ 
 
        1479106800000, 
 
        4592 
 
       ], 
 
       [ 
 
        1479103200000, 
 
        4328 
 
       ], 
 
       [ 
 
        1479099600000, 
 
        2694 
 
       ], 
 
       [ 
 
        1479096000000, 
 
        2787 
 
       ], 
 
       [ 
 
        1479092400000, 
 
        11633 
 
       ], 
 
       [ 
 
        1479088800000, 
 
        3311 
 
       ], 
 
       [ 
 
        1479085200000, 
 
        2839 
 
       ], 
 
       [ 
 
        1479081600000, 
 
        12620 
 
       ] 
 
      ], 
 
      "xAxis": 1, 
 
      "dashStyle": "shortdot" 
 
     } 
 
    ] 
 
});

#container { 
 
    min-width: 1024px; 
 
    max-width: 1024px; 
 
    height: 300px; 
 
    margin: 1em auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://code.highcharts.com/highcharts.js"></script> 
 
<script src="http://code.highcharts.com/modules/exporting.js"></script> 
 

 
<div id="container"></div>

источник

2016-11-22 Bereznyak

Вы должны контролировать позиции клеща в обеих осях. В приведенном примере достаточно установить для оси.endOnTick значение true. При различной ширине диаграммы это может быть недостаточно. https://jsfiddle.net/wtaq5jcL/ – morganfree

@morganfree спасибо, но да, не хватает, если отличается один день и больше дней (как в примере). Я ищу способ исправить это – Bereznyak

проверить мой ответ, теперь он должен быть пуленепробиваемым. – morganfree

Мое решение заключается в следующем:

захватить нижнюю ось клещами дорожит
Карта значения в пикселях
Карта пикселей на верхней оси значений,
Установить значения до типораций верхней оси

Все вычисления могут быть выполнены в tickPositioner.

tickPositioner: function() { 
    var axisTop = this, 
    axisBottom = this.chart.xAxis[0], 
    ticksBottom = axisBottom.tickPositions; 

    var ticksTop = ticksBottom.map(function(tickValue) { 
    return axisTop.toValue(axisBottom.toPixels(tickValue)); 
    }); 

    return ticksTop; 
},

пример: https://jsfiddle.net/439adgpa/

После установки клеща позиции в клещевого позиционером, вы должны вручную установить правильный формат или использовать его из нижней оси клещей.

labels: { 
    format: '{value:%H:%M}' 
}

или

ticksTop.info = ticksBottom.info;

пример: https://jsfiddle.net/439adgpa/1/

источник

2016-11-25 16:21:02 morganfree

Хорошее обходное решение :) Это первая часть, также нужна синхронизация точек. Но в любом случае, я предложил запрос функции, потому что нужен тот же самый, только для pointsInterval :) – Bereznyak

Использование сложены серии друг над другом. yAxis сложены и пронумерованы как 0,1,2. Here is an example fiddle

   { 
         name : 'First', 
         data :data for first, 
         zIndex : 1, 
         lineWidth:3, 
         color:'red', 
         yAxis: 0 , 
         marker : { 
          enabled : false 

         } 
        }, { 
         name : 'second', 
         data : data for second, 
         lineWidth:3, 
         zIndex : 1, 
         yAxis: 1 , 
         color:'#BE6230', 
         marker : { 
          enabled : false 

         } 
        }

источник

2016-11-22 12:53:37

Нам нужна диаграмма на том же yAxis (на той же плоскости). Для сравнения серий по дате (f.ex.на текущей неделе и предыдущей неделе). Сложенные не дают сделать это. – Bereznyak

Нравится (эта же диаграмма) https://i.stack.imgur.com/zgg2L.png – Bereznyak

Highcharts two datetime xAxis chart с таким же интервалом тиков

ответ

Смежные вопросы