Plot mehrere Zeilen auf x-Achse Highcharts

Question

Ich bin verpflichtet, ein Diagramm mit Änderungen an der Anzahl der Benutzer (erhöhen oder verringern) im Namen der Änderungen an Mitarbeiter auf Kampagnen zeichnen, dafür behalte ich Änderungsprotokoll der Mitarbeiteraktivität. also muss ich x-achsenlinien auf jeder x-achse serie grafisch darstellen.

Ich suchte und fand noch keine passende Antwort. Diese Js Fiddle hat nur eine Linie auf der x-Achse, aber ich brauche Linien auf jeder x-Achse-Serie.

ein mögliches Ergebnis könnte sein, aber müssen plotlines Objekt für jede Zeile, die ich brauche generieren.

plotLines: [{ 
     color: '#FF0000', 
     width: 2, 
     value: 4.5 
    }, { 
     color: '#00FF00', 
     width: 2, 
     value: 5.5 
    }] 

Answer 1

Ja, Sie müssen das Array plotlines selbst mit dem Wert generieren, der den x-Werten Ihrer Daten entspricht. Da Sie Tag-Inkremente verwenden, verwenden Sie dasselbe für die Plot-Linien.

http://jsfiddle.net/8mn674ch/1/

var data = [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4]; 
var plotlines = []; 
//var startTime = Date.UTC(2010, 0, 1).getTime(); 
var startTime = new Date(Date.UTC(2010, 0, 1)).getTime(); 
for(var i = 0; i < data.length; i++) { 
    var timeincr = startTime + 1000*3600*24*i; 
    console.log(new Date(timeincr)); 
    var pline = { // mark the weekend 
      color: 'red', 
      width: 2, 
      value: timeincr, 
      events: { 
       click: function() { 
        $report.html('click'); 
       }, 
       mouseover: function() { 
        $report.html('mouseover'); 
       }, 
       mouseout: function() { 
        $report.html('mouseout'); 
       } 
      } 
     }; 
    plotlines.push(pline); 
} 
Highcharts.chart('container', { 
    xAxis: { 
     plotLines: plotlines, 
     tickInterval: 24 * 3600 * 1000, 
     // one day 
     type: 'datetime' 
    }, 

    series: [{ 
     data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4], 
     pointStart: Date.UTC(2010, 0, 1), 
     pointInterval: 24 * 3600 * 1000 
    }] 
});