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
quelle
Antworten:
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:
API: https://api.highcharts.com/highcharts/chart.plotBackgroundColor
quelle
Für das, was ich sehe , Sie Styling von CSS tun müssen Docs Seite gibt es ein Live - Beispiel hier
Bearbeiten: Ich habe ein Workaorund zu diesem Thema gefunden. Sie können die Hintergrundfarbe für einen bestimmten Bereichsbereich mithilfe von plotBands ändern:
In Ihrem Fall sollten Sie die Werte für den ersten und den letzten festlegen.
quelle
pane:{ background:{ backgroundColor:"#000000" } }
innerhalb der Diagrammoptionen json und innerhalb des "Diagramms" der gleichen Optionen und es hat nichts getan ....Ein hackiger Weg, dies zu tun, wäre, einen Rect in das SVG zu injizieren.
quelle