X-Achsen-Datum fromatting in highcharts

Question

$(function() { 
    $('#dc-item-demand-graph').highcharts({ 
     chart: { 
      type: 'spline', 
      padding : 0 
     }, 
     title: { 
      text: '' 
     }, 
     subtitle: { 
      text: '' 
     }, 
     xAxis: { 
      startOnTick: true, 
      type: 'datetime', 
      pointInterval: 5 * 24 * 3600000, 
      gridLineWidth: 1, 
      plotLines: [{ 
       color: '#f36c6c', 
       dashStyle: 'Solid', 
       value: 2, // Value of where the line will appear 
       width: 2 // Width of the line  
      }] 
     }, 
     yAxis: { 
      min: 0, 
      max: 700, 
      gridLineWidth: 0, 
      title: { 
       text: '' 
      }, 
      plotLines: [{ 
       value: 0, 
       width: 1, 
       color: '#808080' 
      }] 
     }, 
     legend: { 
      enabled: false, 
     }, 
     credits: { 
      enabled: false 
     }, 
     exporting: { 
      enabled: false 
     }, 
     //tooltip: { 
     // valueSuffix: '°C' 
     //}, 
     series: ItemDemandChartData() 
    }); 
}); 
function ItemDemandChartData() { 
    var data = [{ 

      name: 'At DC', 
      dashStyle: 'dot', 
      color: '#616fc6', 
      data: [400, 390, 300] 
     }, { 
      name: 'At stores', 
      dashStyle: 'ShortDash', 
      color: '#ffdb03', 
      data: [300, 320, 360, 320, 500] 
     }, { 
      name: 'ROP Generated', 
      dashStyle: 'ShortDash', 
      color: '#00c4db', 
      data: [200, 300, 500, 450, 400],    
      marker: { 
       enabled: true, 
       radius: 3, 
       symbol: 'triangle', 
       //symbol: 'url(/Content/Img/markdown.PNG)', 
       color: '#00c4db' 
      }, 
     }] 

    return data 
} 

oben ist der Code für das Diagramm, das ich versuchte. in dem ich Format X-Achsen-Werte wie im Bild anbei haben.

Ich bin mir nicht sicher, wo soll ich den Code in X-Achsen-Kategorien oder Serienoptionen ändern? Kinldy hilf mir.

danke im voraus !!

jsfiddle link aktualisiert:

Answer 1

Dies liegt daran, Ihre Daten zu sagen hat über nur y Werte Achse, aber die x-Achse Datum Zeit.

data: [300, 320, 360, 320, 500] 

so nimmt es 0 als Startzeit und y-Punkte für jede 1 Sekunde. wenn Sie Daten ein x-Achse haben wollen machen die Daten als zweidimensionale wie hier gezeigt

data: [ 
       [Date.UTC(2010, 0, 1), 300], 
       [Date.UTC(2010, 0, 2), 320], 
       [Date.UTC(2010, 0, 3), 360], 
       [Date.UTC(2010, 0, 6), 320], 
       [Date.UTC(2010, 0, 7), 500] 
      ] 

statt UTC-Datum können Sie Ihre Zeitstempel als auch.

hier ist das Beispiel jsfiddle.

Sie die datforamt haben können, wie Sie

wollen

here ein Beispiel für Datumsformatierung ist