帆软报表用js自定义在折线图折线95%处的位置显示样本点
时间: 2024-03-26 15:39:10 浏览: 65
可以通过以下步骤来实现在帆软报表折线图中,在折线的95%处显示样本点:
1. 在帆软报表设计器中,进入折线图的“属性”面板,找到“脚本”选项卡。
2. 在“脚本”选项卡中,选择“JS脚本”,然后输入以下代码:
```
chart: {
events: {
load: function() {
var points = this.series[0].points;
var maxIndex = Math.floor(points.length * 0.95);
var x = points[maxIndex].x;
var y = points[maxIndex].y;
var label = this.renderer.label(y, x, null, null, null, null, true)
.css({
color: '#FFFFFF',
backgroundColor: '#000000',
padding: '4px',
borderRadius: '5px',
zIndex: 6
})
.add();
label.align(Highcharts.extend(label.getBBox(), {
align: 'center',
x: 0,
verticalAlign: 'bottom',
y: 0
}), null, 'spacingBox');
}
}
}
```
3. 保存报表并预览,你将看到在折线的95%处显示样本点的值。
解释一下代码:
首先,我们在图表的“load”事件中获取第一个数据系列的所有数据点(points)。然后,我们计算出折线的95%位置(maxIndex),并获取该位置的x和y值。接下来,我们使用Highcharts的渲染器(renderer)创建一个文本标签(label),并设置其样式(颜色、背景色、内边距、圆角和层级)。最后,我们使用“align”函数将标签放置在折线的95%处,并将其添加到图表中。
阅读全文