Highcharts zwei datetime xAxis Diagramm mit gleichen Ticks Intervall

Ich zwei Tage denke über Problem, aber ich weiß nicht, machen Diagramm mit zwei normalisierten datetime xAxis.Highcharts zwei datetime xAxis Diagramm mit gleichen Ticks Intervall

Ich versucht, LinkedDo zu verwenden und Datenarrays zu normalisieren (aber dieses harte Overkill).
linkedTo zeigt nur überlappende Daten an.
Ohne linkedTo und Normalisierung Arrays zeigten Zecken als async wie diese

mir bitte helfen

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>

Quelle

2016-11-22 Bereznyak

Sie haben tick Positionen in beiden Achsen zu steuern. In dem von Ihnen angegebenen Beispiel reicht es aus, axis.endOnTick auf true zu setzen. Bei unterschiedlicher Chartbreite kann es jedoch nicht ausreichen. https://jsfiddle.net/wtaq5jcL/ – morganfree

@morganfree danke, aber ja, reicht nicht aus wenn ein Tag und mehr Tage (wie im Beispiel). Ich suche nach Weg, es zu beheben – Bereznyak

überprüfen Sie meine Antwort, sollte jetzt kugelsicher sein. – morganfree

Meine Lösung ist wie folgt:

greifen die unteren Achse Zecken Werte
die Werte Pixel Karte
Ordnen Sie die Pixel nach oben Achswerte
die Set Werte zur oberen Achse ticks

Die gesamte Berechnung kann in tickPositioner durchgeführt werden.

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; 
},

Beispiel: https://jsfiddle.net/439adgpa/

Nach tick Positionen in tick Stellungs einstellen, müssen Sie das richtige Format oder manuell eingestellt verwenden, um von der unteren Achse Zecken.

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

oder

ticksTop.info = ticksBottom.info;

Beispiel: https://jsfiddle.net/439adgpa/1/

Quelle

2016-11-25 16:21:02 morganfree

Gute Umgehung :) Es ist der erste Teil, auch brauchen Punkte synchronisieren. Aber wie auch immer, ich schlug eine Feature-Anfrage vor, denn ich brauche dasselbe, nur für pointsInterval :) – Bereznyak

Verwenden Serie übereinander gestapelt. yAxis gestapelt und nummeriert als 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 

         } 
        }

Quelle

2016-11-22 12:53:37

Wir brauchen Diagramm auf derselben yAchse (auf derselben Ebene). Zum Vergleichen von Zeitreihen (zB aktuelle Woche und vorherige Woche). Gestapelt gibts das nicht. – Bereznyak

Gefällt mir (gleich highcharts) https://i.stack.imgur.com/zgg2L.png – Bereznyak

Highcharts zwei datetime xAxis Diagramm mit gleichen Ticks Intervall

Antwort

Verwandte Themen