Anychart样条图首尾极值点标签被截断的调整方案问询

我需要一个完全覆盖容器的Anychart样条面积图，要求首尾数据点贴在容器边缘。目前我通过代码只在最高和最低值点显示分数标签，但当极值点恰好是首尾点时，标签会被容器边缘截断，需要调整这些首尾点上的标签位置以避免截断。

问题截图：

当前代码：

/******** TREND ********/
//create a chart
var chart = anychart.area();
// create a spline area series and set the data
var series = chart.splineArea(dataArray);
series.connectMissingPoints(false);
var fill = {
    keys: ["#57BEB7", "white"], // Define colors for the gradient
    angle: 270 // Set the angle of the gradient
};
series.fill(fill);
series.stroke("#57BEB7")
// labels
series.labels(true);
series.labels().format(function() {
    if (this.value === {{.Chart.HighestValue}} && !highestValAdded) {
        highestValAdded = true
        if ({{.Chart.HighestValue}} == {{.Chart.LowestValue}}){
            lowestValAdded = true
        }
        return this.value + "%";
    } else if (this.value === {{.Chart.LowestValue}} && !lowestValAdded) {
        lowestValAdded = true
        return this.value + "%";
    }
    return "";
});
series.labels().position("center-top");
series.labels().anchor("top");
series.labels().offsetX(5);
series.labels().fontColor("#55565A");
series.labels().fontWeight(600);
// set the chart title
chart.title().enabled(false);
// set the titles of the axes
var xAxis = chart.xAxis();
xAxis.enabled(false);
var yAxis = chart.yAxis();
yAxis.enabled(false);
chart.xScale().mode('continuous');
// grid
chart.xGrid().enabled(true);
chart.xGrid().stroke("#f0f0ef");
// tooltip
chart.tooltip().format((d) => {
    return `Score: ${d.value}%`
});
chart.tooltip().allowLeaveStage(true);
var interactivity = chart.interactivity();
interactivity.selectionMode("none");
var margin = chart.margin();
var padding = chart.padding();

series.markers()
    .type('circle')
    .size(1)
    .fill("#57BEB7")
    .stroke("none");

margin.left(0);
margin.right(0);
margin.bottom(0);
margin.top(0);
padding.left(0);
padding.right(0);
padding.bottom(0);
padding.top(0);
// set the container id
chart.container("chart-{{ .CardId }}");
// initiate drawing the chart
chart.draw();

可以通过动态判断标签对应的点是否为首尾数据点，针对性调整标签的位置参数（位置、锚点、偏移量），避免被容器边缘截断。具体修改如下：

修改后的核心代码 #

// 先获取数据集长度，用于判断首尾点
var dataLength = dataArray.length;

series.labels().format(function() {
    // 获取当前点的索引，判断是否是首尾点
    var pointIndex = this.index;
    var isFirstPoint = pointIndex === 0;
    var isLastPoint = pointIndex === dataLength - 1;
    
    // 原有极值标签判断逻辑
    if (this.value === {{.Chart.HighestValue}} && !highestValAdded) {
        highestValAdded = true;
        if ({{.Chart.HighestValue}} == {{.Chart.LowestValue}}){
            lowestValAdded = true;
        }
        // 针对首尾极值点调整标签位置
        if (isFirstPoint) {
            this.label.position("center-top").anchor("top-left").offsetX(10);
        } else if (isLastPoint) {
            this.label.position("center-top").anchor("top-right").offsetX(-10);
        } else {
            // 非首尾点保持原有设置
            this.label.position("center-top").anchor("top").offsetX(5);
        }
        return this.value + "%";
    } else if (this.value === {{.Chart.LowestValue}} && !lowestValAdded) {
        lowestValAdded = true;
        // 针对首尾极值点调整标签位置
        if (isFirstPoint) {
            this.label.position("center-bottom").anchor("bottom-left").offsetX(10);
        } else if (isLastPoint) {
            this.label.position("center-bottom").anchor("bottom-right").offsetX(-10);
        } else {
            // 非首尾点保持原有设置
            this.label.position("center-bottom").anchor("bottom").offsetX(5);
        }
        return this.value + "%";
    }
    return "";
});

// 保留基础样式设置
series.labels().fontColor("#55565A");
series.labels().fontWeight(600);

其他可选方案 #

1. 微调容器内边距：如果允许极小的内边距，可以设置padding.left(5)和padding.right(5)，既保证首尾点视觉贴近边缘，又给标签留出显示空间。
2. 强制标签不裁剪：添加series.labels().overflow("visible")，允许标签超出图表区域，再配合偏移量调整位置，但需注意标签可能会覆盖容器外的其他元素。

内容的提问来源于stack exchange，提问作者mmohamud1