2017-10-13 12 views
0

Mon actuelle axe x ressemble en image:Highcharts ajuster première et la dernière tique sur l'axe x pour diriger les valeurs

My current x-axis

Je dois régler la première et la dernière tique au plus bas et la plus grande valeur . Alors disons que la première tique serait 26.4.2015 18:38:36 et la dernière tique serait 27.4.2015 9:07:27. Le reste des tiques devrait être calculé automatiquement.

$('#container').highcharts({ 
    chart: { 
    zoomType: "x" 
    }, 
    xAxis: { 
    type: "datetime", 
    title: { 
     text: "Time" 
    }, 
    minPadding: 0, 
    maxPadding: 0, 
    min: 1430073516000, 
    tickmarkPlacement: "on", 
    showFirstLabel: true, 
    showLastLabel: true, 
    startOnTick: false, 
    endOnTick: false, 
    labels: { 
     formatter() { 
     if (this.isFirst || this.isLast) { 
      return Highcharts.dateFormat("%e.%m.%Y %H:%M:%S", this.value); 
     } else { 
      return this.axis.defaultLabelFormatter.call(this); 
     } 
     } 
    } 
    }, 
    yAxis: { 
    title: { 
     text: "Value" 
    } 
    }, 
    tooltip: { 
    shared: true 
    }, 
    series: [ 
    { 
     id: "First", 
     name: "First", 
     marker: { 
     enabled: false 
     }, 
     data: [0, 0, 0, 0, 0, 0, 242, 542, 456, 422, 445, 884, 123], 
     pointStart: 1430073516000, 
     pointInterval: 60000 
    }, 
    { 
     id: "Second", 
     name: "Second", 
     marker: { 
     enabled: false 
     }, 
     data: [0, 0, 0, 25, 356, 427, 242, 456, 811, 422, 541, 5, 0], 
     pointStart: 1430073516000, 
     pointInterval: 60000 
    } 
    ] 
}); 

jsFiddle: http://jsfiddle.net/vy5uL2aw/1/

+0

Vous avez besoin de partager vos données de série au moins, si vous voulez une réponse. De préférence un jsfiddle avec votre graphique actuel. – ewolden

+0

JSFiddle ajouté. – Janek

+0

Vous ne pouvez pas définir certaines graduations et laisser le diagramme en générer automatiquement d'autres sur le même axe. Deux choses que vous pourriez essayer: 1) créer un deuxième 'xAxis' où vous spécifiez seulement ces deux ticks (vous devrez ajuster le décalage, cacher la ligne, etc.) 2) ajoutez deux' plotLines' à votre diagramme et employez leur étiquettes pour atteindre votre objectif. Sinon, vous pouvez utiliser la fonction 'tickPositioner()' pour définir toutes les graduations de façon appropriée sur un seul axe. – jlbriggs

Répondre

0

Solution a été fonction suivante ajoutée à l'objet axeX.

tickPositioner() { 
    let tickPositions = this.tickPositions; 
    tickPositions[0] = this.dataMin; 
    tickPositions[tickPositions.length - 1] = this.dataMax; 
    return tickPositions; 
}