Hohe Diagramm Bereich Bereich Grafik mit anderen Rahmenfarbe

Question

Ich benutze High-Chart, um graphs.currently mit Bereich Bereich Grafik zu zeichnen.Ich möchte andere Farbe zu Grenze des Bereichs Bereich graph.and füllen den Innenraum mit weiß.Wie kann ich erreichen Sie dies. Aktuelle Grafik sieht wie folgt aus. Ich möchte es mit weißer und unterschiedlicher Randfarbe füllen.

  name: 'Data', 
     pointInterval: 3600 * 1000, 
     data: noData, 
     type: 'arearange', 
     lineWidth: 0, 
     linkedTo: ':previous', 
     color : '#D2D2D2',     
     zIndex: 0, 
     enableMouseTracking: false 

Answer 1

Es ist ziemlich einfach zu erreichen. Diese Eigenschaften können über die plotOption-Einstellungen gesteuert werden.

plotOptions: { 
    arearange: { 
     lineColor: 'blue', 
     fillColor: 'grey' 
    } 
}, 

Here ist ein Arbeits jsfiddle für Ihre Referenz.

Hoffe, das ist, was Sie suchen.

Edit: Wenn Sie mehrere arearange aufweisen, dann können Sie unter

series: [{ 
    name: 'Temperatures', 
    data: data, 
    fillColor: 'grey', 
    lineColor: 'red' 
},{ 
    name: 'Humidity', 
    data: data2, 
    fillColor: 'grey', 
    lineColor: 'red' 
}] 

Answer 2

Basierend wie gezeigt tun auf Sie hinterfragen und die Kommentare von der anderen Antwort:

Sie einen Rahmen hinzufügen könnte für Grundstücksfläche und entfernt x-Achse Kantenpolster für gleiche Serie Stück in diesem Beispiel:

JSFiddle demo:

http://jsfiddle.net/u17h0h9b/

$(function() { 
 
    var chart = Highcharts.chart('container', { 
 
    chart: { 
 
     plotBackgroundColor: '#afa', 
 
     plotBorderColor: '#f0f', 
 
     plotBorderWidth: 2 
 
    }, 
 
    xAxis: { 
 
    \t minPadding: 0, 
 
     maxPadding: 0 
 
    }, 
 
    series: [{ 
 
    \t type: 'area', 
 
     color: '#f0f', 
 
     fillColor: 'rgba(0,100,200,0.3)', 
 
     data: [1, 2, 3, 4, 5, 6, 7] 
 
    }] 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<div id="container" style="height: 400px"></div>