如何解决高图中钟形曲线的不同填充不透明度
我正在使用HighCharts和Highcharts-react-official在我的项目中使用highcharts。我能画出钟形曲线图。这是代码实现:
var data = [3.5,3,3.2,3.1,3.6,3.9,3.4,2.9,3.7,4,4.4,3.5,3.8,3.3,4.1,4.2,2.3,2.8,2.4,2.7,2,2.2,2.5,2.6,3
];
var pointsInInterval = 5;
Highcharts.chart('container',{
chart: {
margin: [50,50,50],events: {
load: function () {
Highcharts.each(this.series[0].data,function (point,i) {
var labels = ['4σ','3σ','2σ','σ','μ','4σ'];
if (i % pointsInInterval === 0) {
point.update({
color: 'black',dataLabels: {
enabled: true,format: labels[Math.floor(i / pointsInInterval)],overflow: 'none',crop: false,y: -2,style: {
fontSize: '13px'
}
}
});
}
});
}
}
},title: {
text: null
},legend: {
enabled: false
},xAxis: [{
title: {
text: 'Data'
},visible: false
},{
title: {
text: 'Bell curve'
},opposite: true,visible: false
}],yAxis: [{
title: {
text: 'Data'
},series: [{
name: 'Bell curve',type: 'bellcurve',xAxis: 1,yAxis: 1,pointsInInterval: pointsInInterval,intervals: 4,baseSeries: 1,zIndex: -1,marker: {
enabled: true
}
},{
name: 'Data',type: 'scatter',data: data,visible: false,marker: {
radius: 1.5
}
}]
});
贝尔曲线图正确,但我想对不同范围的数据实现不同的填充不透明度。 我曾经尝试过使用zone-Stops,但这不起作用,并且代码实现太长了。
我也提供了我的要求的图片。
有没有简单的方法可以实现这种行为?
解决方法
根据评论-可以通过使用zones
功能并将series.zoneAxis
定义为'x'来实现。
演示:https://jsfiddle.net/BlackLabel/3g8061k5/
{
...,zoneAxis: 'x',zones: [{
value: 2.18,color: 'rgb(255,0.25)'
},{
value: 2.62,color: 'rgb(0,102,255,{
value: 3.49,color: 'rgb(51,204,51,{
value: 3.92,{
color: 'rgb(255,]
}
API:https://api.highcharts.com/highcharts/series.line.zones
API:https://api.highcharts.com/highcharts/series.line.zoneAxis
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。