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

8

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 DankGeben Sie hier die Bildbeschreibung ein

Codebot
quelle
Es ist schwer, es so zu debuggen. Wenn Sie mit Ihrem Code eine Geige spielen können, wäre das hilfreich.
junaid rasheed
Bitte reproduzieren Sie Ihren Code online, an dem ich arbeiten könnte. Hier ist eine Vorlage, die Sie verwenden können: Codesandbox.io/s/nw750l07nj
Sebastian Wędzel
@ SebastianWędzel Überprüfen Sie dies. Wenn Sie den Fenstercode entfernen und auf "Diagramm aktualisieren" klicken, sollten neue Daten angezeigt werden. Codesandbox.io/s/vue-template-40b4z
Codebot
Ich befürchte, dass diese Demo nicht gut funktioniert. Könnten Sie es beheben?
Sebastian Wędzel
@ SebastianWędzel Hallo nochmal. Bitte überprüfen Sie dies unter https://codesandbox.io/s/vue-template-m6fse, jetzt woks es. Wenn Sie auf die Schaltfläche Diagramm aktualisieren klicken, werden zwei verschiedene Bereiche im selben Diagramm erstellt. Jetzt möchte ich, dass diese beiden Fenster irgendwie eine Hintergrundfarbe haben. Danke
Codebot

Antworten:

3

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

Sebastian Wędzel
quelle
So nah, aber nicht was ich will. Ich möchte, dass die Scheiben weiß und der Hintergrund immer noch schwarz sind.
Codebot
Ich verstehe nicht - haben Sie ein Bild, das beschreibt, wie das Diagramm aussehen soll?
Sebastian Wędzel
Überprüfen Sie meine ursprüngliche Frage, ich habe ein Bild hochgeladen, die roten Bereiche sind die Fenster. Diese Scheiben müssen selbst eine andere Farbe haben.
Codebot
Möchten Sie so etwas erreichen? Codesandbox.io/s/vue-template-umuhv
Sebastian Wędzel
Ja, aber Sie können nicht sehen, wo ein Bereich beginnt und der andere endet. Der Abstand zwischen ihnen sollte also auch schwarz sein, damit Sie sie leicht voneinander unterscheiden können. Der Abstand zwischen 7.5 und 0
Codebot
2

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.

Bernardo Marques
quelle
Dies ist näher an dem, was ich möchte, aber ich möchte, dass das Fenster eine andere Farbe hat und ich kann keine CSS-Regel nur für die Fenster des Diagramms sehen. Danke
Codebot
Ich bin nicht sicher, was Sie unter Fenster verstehen, aber ich habe diese Eigenschaft in der API-Referenz gefunden
Bernardo Marques
Überprüfen Sie das Foto in meiner ursprünglichen Frage, die roten Bereiche sind die Fenster. Danke
Codebot
Ich habe versucht, pane:{ background:{ backgroundColor:"#000000" } }innerhalb der Diagrammoptionen json und innerhalb des "Diagramms" der gleichen Optionen und es hat nichts getan ....
Codebot
0

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>';
Katze
quelle