Hintergrundfarbe für mehrere Highchart-Fenster in der Vue-App

Ich verwende Highcharts in einer Vue-App mit von highcharts-vue

Ich stelle meine Vorlage so ein

<highcharts class="vessChart" ref="chart" style="width:100%"  :callback="chartcallback" :options="options"    ></highcharts>  

und dann stelle ich die Optionen des Diagramms im Vue ein

            yAxis:[],
        series:[],     
        background:[],
        options: {              
          chart: {
            borderWidth: 1,
            marginLeft: 40,
            marginRight: 2,
            type:'line',
            zoomType: 'x',
            title: {
                text: ''
            },
            panning:true
            /*backgroundColor:'lightgrey'*/
          },
          title: {
            text: ''
          },
          pane:{
            background:[]
          },
          time:{
            useUTC:true
          },  
          credits:{
            enabled:false
          },
          tooltip: {
            shared: true
          },
          title:{
            text:null
          },
          rangeSelector: {
            inputEnabled: false
          },
          xAxis:{
            type:'datetime',
            title:
            {
              align:'high'
            }, 
            labels: {
              padding: 50,
              format: '{value:%e %b %Y}',
              style: {
                fontSize: '10px'
              }
            },
            crosshair: {
                enabled: true,
                width: 2,
                color: '#000'
            },
          },
          yAxis: [],   
          plotOptions: {
            series: {
              animation: false
            }
          },
          ,series: []
        }

Wenn ich dann Daten hinzufügen muss, schiebe ich Daten entsprechend an yAxis-, Serien- und Hintergrund-Arrays

                this.data.titles.forEach(title => {
              this.yAxis.push(
                  {
                    title: {
                      text: title.title,
                      margin:20,
                      fontSize:"15px"
                    },
                    labels: {
                      enabled:true,
                      align: 'left',
                      padding:15
                    },
                    alignTicks:'left', 
                    textAlign:'left',
                    align:'middle',
                    height: chartHeight+'%',
                    top:topStep+'%',
                    opposite:false, 
                    offset:0
                  }
              );
              this.background.push({backgroundColor: "red"});
              topStep = topStep + chartHeight + 5; 
              this.series.push({
                    yAxis:counter,
                    name:title.title,
                    data:[]
              });
              counter++;
            });//foreach 
            this.options.yAxis = this.yAxis;
            this.options.series = this.series;
            this.options.pane = this.background;

Ich habe versucht, Highcharts-more zu importieren

    import highchartsmore from './highcharts-more.js'     

aber es funktioniert nicht, die Seite kommt weiß zurück. Ich habe auch versucht, es zu importieren, indem ich zu index.html von Vue gegangen bin und hinzugefügt habe<script src="https://code.highcharts.com/highcharts-more.js"></script>

Es gibt keinen Fehler auf der Seite, aber die Fenster haben immer noch keine Farbe.

* Wenn dies nicht möglich ist, kann ich wenigstens irgendwie eine Linie zwischen den Fenstern einfügen?

Vielen Dank

BEARBEITEN

Die roten Bereiche sind die "Fenster". Vielen Dank

Sie können die chart.plotBackgroundColor verwenden Eigenschaft , um Ihre Anforderungen zu erfüllen.

Demo: https://codesandbox.io/s/vue-template-pt9jp

Und da Ihr Diagramm dynamisch gerendert wird, empfehle ich, die Animation zu deaktivieren:

chart: {
  type: "spline",
  title: "Hassaan",
  animation: false
},

API: https://api.highcharts.com/highcharts/chart.plotBackgroundColor

Für das, was ich sehe , Sie Styling von CSS tun müssen Docs Seite gibt es ein Live - Beispiel hier

@import 'https://code.highcharts.com/css/highcharts.css';

.highcharts-plot-background {
	fill: #efffff;
}
.highcharts-plot-border {
	stroke-width: 2px;
	stroke: #7cb5ec;
}

Bearbeiten: Ich habe ein Workaorund zu diesem Thema gefunden. Sie können die Hintergrundfarbe für einen bestimmten Bereichsbereich mithilfe von plotBands ändern:

e.g. yAxis : {[ ... plotBands : {color : '#f7d724', from : -50, to : 50}, ... ]}

In Ihrem Fall sollten Sie die Werte für den ersten und den letzten festlegen.

Ein hackiger Weg, dies zu tun, wäre, einen Rect in das SVG zu injizieren.

document.getElementsByClassName("highcharts-root")[0].innerHTML += '<rect width="100%" x="0" y="40" height="150" fill="#ff0000"></rect>';
document.getElementsByClassName("highcharts-root")[0].innerHTML += '<rect width="100%" x="0" y="200" height="150" fill="#ff0000"></rect>';