我使用 react-highcharts 创建了一个折线图。这就是它的样子: .现在,我正在尝试在线下添加颜色填充渐变,这就是我正在做的:
render() {
let config = {
chart: {
animation: {
duration: 1000
}
},
plotOptions: {
area: {
lineWidth: 1,
marker: {
enabled: false,
states: {
hover: {
enabled: true,
radius: 5
}
}
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
}
}
},
rangeSelector: {
buttons: [{
type: 'month',
count: 1,
text: '1m'
}, {
type: 'month',
count: 3,
text: '3m'
}, {
type: 'month',
count: 6,
text: '6m'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}],
selected: 0,
inputEnabled: false,
},
title: {
text: 'Progress Chart'
},
series: [{
name: 'Account Balance',
data: this.getProgressData(),
type: 'area',
fillColor: {
linearGradient: [0, 0, 0, 300],
stops: [
[0, '#4286f4'],
[1, '#ffffff']
]
},
tooltip: {
valueDecimals: 2
}
}],
yAxis: { gridLineWidth: 0 },
xAxis: { gridLineWidth: 2 },
};
return(
<div>
<ReactHighstock config={config}/>
</div>
)
}
我正在使用渐变,但问题是我得到的是没有长矛的平面图表,如下所示: .我希望我的图表看起来像以前的图表,但具有渐变颜色填充。
最佳答案
请注意 x 轴上的值是如何变化的。折线图使用最小值和最大值调整极值。面积图有附加参数 threshold
( http://api.highcharts.com/highcharts/plotOptions.area.threshold ) 指定面积应该从哪里开始。默认为 0
。
您可以在您的数据中找到最小值并设置阈值,如下所示:
var data = [50, 71.5];
(...)
// chart options
threshold: Math.min(...data)
关于javascript - react-highcharts 折线图的渐变填充,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46686590/