高图区域花线,未获得图表的默认颜色 [英] Highcharts areaspline, not getting the default color for chart
本文介绍了高图区域花线,未获得图表的默认颜色的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在创建一个区域图高图.因为我没有设置任何颜色,所以它应该默认为默认的蓝色.对我来说,它自动填充为rgba(247, 163, 92, 0.75);
.为什么会这样呢.如何在顶部边框上获得默认的深蓝色,在areapline内获得默认的蓝色.
I am creating an areaspline highcharts. As I am not setting any color it should default to the default blue. For me its automatically filling with rgba(247, 163, 92, 0.75);
. Why is that happening. How can I get the default darker blue on the top border and the default blue inside the areaspline.
这是我的代码:
let series_vals = [];
let data_array = [];
let val_array = [];
for (let i = 0; i <= 15 i++) {
series_trend.push("series_trend" + i);
data_array.push([]);
val_array.push(val);
}
let series = [];
series_vals.forEach((name, index) => {
series.push({
val_array: val_array[index],
data: data_array[index],
})
});
$.getJSON(json, result => {
series.forEach(obj => {
result.forEach((elem, i, array) => {
if (elem.val === obj.val) {
obj.data.push({
x: elem.date,
y: elem.xyz,
});
}
});
});
Highcharts.chart(target, {
chart: {
height: 100,
width: 300,
type: 'areaspline',
},
title: {
text: ''
},
credits: {
enabled: false
},
legend: {
enabled: false
},
xAxis: {
visible: false
},
yAxis: {
visible: false
},
tooltip: {
formatter: function() {
let date_format = (filter == 'day') ? moment(this.key).format('MMM DD, YYYY') : moment(this.key).format('MMM YYYY');
let tooltip = `
<span style="font-weight:500;">${date_format}</span>
<br />
<span>${this.y}</span>
`;
return tooltip;
},
useHTML: true
},
plotOptions: {
series: {
fillColor: null,
marker: {
enabled: false,
symbol: 'circle'
}
}
},
series: series
});
});
默认情况下,这是我得到的颜色:.
By default this is the color I am getting: .
反正我可以将其更改为默认值吗?
Is there anyway I can change it to the default?
推荐答案
您可以通过设置以下选项来设置区域颜色:
You can set area color by setting these options:
plotOptions: {
areaspline: {
fillColor: 'rgba(123, 181, 236, 0.7)',
lineColor: '#7BB5EC',
marker: {
fillColor: '#7BB5EC'
}
}
}
演示:
这篇关于高图区域花线,未获得图表的默认颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文