0
I Highcharts sind mit (Region Chart) ...Highcharts - Gebiet fillOpacity mischt auf mehreren Flächendiagramme
Ich versuche, Linienfarbe als #f68936 und Bereich Hintergrundfarbe als 10% of opacity, um seine Farbe zu verwenden. Es funktioniert wie erwartet, wenn ich ein Diagramm verwende. Wo, wie ich ein Problem im Deckkrafthintergrund des vorderen Diagramms bekomme, indem ich mehr Bereiche kombiniere.
Grüner Hintergrund Opazität wird mit der roten Farbe Mischen und andere Farbe :(
zeigt Wie kann ich den ursprünglichen Farben zeigen (background opacity), obwohl es mehrere Bereiche hat.
Erwartetes Ergebnis: 
Was als wie unten erhalte ich:
$(function() {
// Everything in common between the charts
var commonOptions = {
colors: ['#f68936', '#70ba47', '#33b5e6', '#fd8f40', '#e7ca60', '#40abaf', '#f6f7f8', '#e9e9eb'],
chart: {
style: {
fontFamily: 'Roboto Light',
fontWeight: 'normal',
fontSize: '12px',
color: '#585858',
}
},
title: {
text: null
},
subtitle: {
text: null
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
xAxis: {
title: {
style: {
fontFamily: 'Roboto',
color: "#bbb",
}
},
labels: {
style:{ color: '#bbb' },
},
lineWidth: 1,
tickLength: 0,
},
yAxis: {
title: {
style: {
fontFamily: 'Roboto',
color: "#bbb",
}
},
offset:-6,
labels: {
style:{ color: '#bbb' },
//format:'{value}K',
},
tickInterval: 100,
lineWidth: 1,
gridLineDashStyle: 'dash',
},
series: [{
//backgroundColor: "rgba(0 ,0, 0, 1)",
}],
// Area Chart
plotOptions: {
series: {
fillOpacity: 0.1
},
area: {
lineWidth: 1,
marker: {
lineWidth: 2,
symbol: 'circle',
fillColor: 'white',
radius:3,
},
legend: {
radius: 2,
}
}
},
tooltip: {
useHTML: true,
shared: true,
backgroundColor: '#5f5f5f',
borderWidth: 0,
style: {
padding:10,
color: '#fefefe',
}
},
legend: {
itemStyle: {
fontFamily: 'Roboto Light',
fontWeight: 'normal',
fontSize: '12',
color: '#666666',
},
marker: {
symbol: 'square',
verticalAlign: 'middle',
radius: '4',
},
symbolHeight: 6,
symbolWidth: 6,
},
};
// -----------------------------------------------------
$('.areaChartTwoWay').each(function() {
$(this).highcharts(Highcharts.merge(commonOptions, {
chart: { type: 'area' },
xAxis: {
title: { text: 'Date', },
type: 'datetime',
dateTimeLabelFormats: {
day: '%eth %b'
},
},
yAxis: {
title: { text: 'Count', },
},
series: [{
name: 'Forwards',
color: '#f68936',
marker: { lineColor: '#f68936', fillColor: 'white', },
data: [185, 290, 198, 220, 180, 140, 220, 335, 197, 240],
legendIndex:1,
pointStart: Date.UTC(2016, 2, 11),
pointInterval: 24 * 3600 * 1000 // one day
}, {
name: 'Unique opens',
color: '#70ba47',
marker: { lineColor: '#70ba47', fillColor: 'white', },
data: [90, 95, 98, 80, 70, 68, 85, 71, 64, 90],
legendIndex:0,
pointStart: Date.UTC(2016, 2, 11),
pointInterval: 24 * 3600 * 1000 // one day
}]
}))
});
$('.highcharts-grid > path:last-child').remove();
$('.highcharts-markers > path:last-child').remove();
});<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 class="areaChartTwoWay" style="min-width: 150px; height: 250px; margin: 0 auto"></div>
Hallo ** @ Sebastian Bochan ** danke für die Antwort. Aber ich berechne den yAxis-Wert dynamisch, um den max yAxis-Wert festzulegen. In diesem Fall, wenn ich diese Option nutze, kann ich yAxis Werte nicht steuern :(Siehe diesen Link für das gleiche: [Demo ist hier für das gleiche] (http://stackoverflow.com/questions/36590538/highcharts -yaxis-tickinterval-to-max-data) – Reddy
Sie können die y-Achse bei einer gestapelten oder nicht gestapelten Serie genauso vollständig steuern.Die Frage ist, ob Ihre Datenreihen mehr gestapelt oder nicht gestapelt sind. – jlbriggs