【发布时间】：2019-04-05 09:44:24
【问题描述】：
我正在做一个项目，我需要在同一个图表中显示两个不同的图。（一个是“SPLINE”另一个是“COLUMN”） 我想为每个图设置不同的背景颜色。 注意：不是系列的颜色而是背景颜色
这里我想要样条图的颜色不同，导航器和柱形图的颜色也不同
我会添加相关代码
`
chartOptions = {
chart: {
styledMode: true,
marginTop: 51,
marginRight: 40,
marginLeft: 20,
backgroundColor: '#FCFFC5'
},
navigator: {
top: 1,
series: {
type: 'spline'
},
adaptToUpdatedData: true,
xAxis: {
labels: {
enabled: false,
}
}
},
rangeSelector: false,
plotOptions: {
series: {
showInNavigator: true,
gapSize: 0
}
},
xAxis:{
labels: {
enabled: true,
},
tickColor: 'white',
events: {
afterSetExtremes: (e) => {
var fromDate = e.min;
var toDate = e.max;
if(this.timeout){
clearTimeout(this.timeout);
this.timeout = 0;
}
this.timeout = setTimeout(
() => {
console.log("hello");
this.restService.updateDates({fromDate: moment(fromDate).format("YYYY-MM-DD"), toDate: moment(toDate).format("YYYY-MM-DD")});
}, 1000
);
}
}
},
yAxis: [
{
type: 'logarithmic',
min: 0.1,
labels: {
align: 'left',
x: 5,
formatter: function () {
if (this.value === 0.1) {
return 0;
} else {
return Highcharts.Axis.prototype.defaultLabelFormatter.call(this);
}
}
},
height: '100%',
offset: 0,
lineWidth: 2,
},
{
type: 'logarithmic',
min: 0.1,
labels: {
align: 'right',
x: -5,
formatter: function () {
if (this.value === 0.1) {
return 0;
} else {
return Highcharts.Axis.prototype.defaultLabelFormatter.call(this);
}
}
},
top: '110%',
height: '30%',
lineWidth: 2,
offset:0,
//labels : { x : 5, align: 'left' }
},
{
opposite: true,
height: '70%',
offset: 0,
lineWidth: 2,
left:'-100%',
labels : { x : -5, align: 'left' }
},
{
opposite: true,
top: '70%',
height: '30%',
lineWidth: 2,
offset:0,
left:'-100%',
labels : { x : -5, align: 'left' }
}
],
series: [
],
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> Db',
valueDecimals: 0,
split: true
},
responsive: {
rules: [{
condition: {
maxWidth: 4500
},
chartOptions: {
chart: {
height: 400
},
subtitle: {
text: null
},
navigator: {
enabled: true
}
}
}]
}
};
`
【问题讨论】：
-
请添加代码示例
-
@AmitBaranes 请看看我添加了我的图表选项
标签： angular typescript charts highcharts