高图表数据系列在（顶部）的最大值处截止

Question

我正在使用 Highchart，带有区域样条图表类型。 对象设置对象如下所示：

{
"responsive": {
    "rules": [
        {
            "condition": {
                "maxWidth": 500
            },
            "_id": "highcharts-gxusaxl-69"
        }
    ]
},
"chart": {
    "type": "areaspline",
    "style": {
        "cursor": "pointer"
    }
},
"title": {},
"subtitle": {},
"credits": {
    "enabled": false
},
"xAxis": {
    "lineWidth": 1,
    "lineColor": "#d2d8db",
    "labels": {
        "style": {
            "fontFamily": "Open Sans",
            "fontWeight": "400",
            "fontSize": "0.75rem",
            "color": "#3f5c69"
        }
    },
    "crosshair": {
        "width": 1,
        "color": "#000000",
        "dashStyle": "ShortDash",
        "zIndex": 3
    },
    "type": "datetime"
},
"yAxis": {
    "labels": {
        "style": {
            "fontFamily": "Open Sans",
            "fontWeight": "400",
            "fontSize": "0.75rem",
            "color": "#3f5c69"
        },
        "format": "{value}%"
    },
    "title": {
        "text": ""
    },
    "min": 0,
    "max": 100
},
"legend": {
    "enabled": true,
    "align": "center",
    "verticalAlign": "top",
    "layout": "horizontal",
    "itemStyle": {
        "fontWeight": "400",
        "fontSize": "0.75rem",
        "color": "#333",
        "fontFamily": "Open Sans"
    },
    "useHTML": true
},
"plotOptions": {
    "column": {
        "stacking": "percent",
        "dataLabels": {
            "enabled": false,
            "format": "{point.percentage:.0f}%"
        }
    },
    "area": {
        "stacking": "percent",
        "dataLabels": {
            "enabled": false,
            "format": "{point.percentage:.0f}%"
        },
        "marker": {
            "enabled": false,
            "symbol": "circle"
        }
    }
},
"series": [
    {
        "id": "asIs",
        "name": "As is",
        "color": "#27caff1a",
        "type": "areaspline",
        "data": [
            [1704060000000, 0],
            [1704146400000, 44],
            [1704232800000, 38]
        ],
        "lineColor": "#27CAFF",
        "lineWidth": 1,
        "marker": {
            "enabled": false,
            "symbol": "circle"
        }
    },
    {
        "id": "modified",
        "name": "Modified",
        "color": "#c61d4d1a",
        "type": "areaspline",
        "data": [
            [1704060000000, 0],
            [1704146400000, 114],
            [1704232800000, 117]
        ],
        "lineColor": "#C61D4D",
        "lineWidth": 1,
        "marker": {
            "enabled": false,
            "symbol": "circle"
        }
    },
    {
        "id": "ignored",
        "name": "Ignored",
        "color": "#F8C00A1A",
        "type": "areaspline",
        "data": [
            [1704060000000, 0],
            [1704146400000, 42],
            [1704232800000, 45]
        ],
        "lineColor": "#F8C00A",
        "lineWidth": 1,
        "marker": {
            "enabled": false,
            "symbol": "circle"
        }
    },
    {
        "id": "averageSimilarity",
        "name": "Adherence",
        "color": "#2d96d2",
        "type": "spline",
        "lineWidth": 1,
        "dashStyle": "LongDash",
        "marker": {
            "enabled": false,
            "symbol": "circle"
        },
        "data": [
            [1704060000000, 0],
            [1704146400000, 50.710857],
            [1704232800000, 48.705587]
        ]
    }
],
"exporting": {
    "buttons": {
        "contextButton": {
            "enabled": false
        }
    }
},
"tooltip": {
    "shared": true,
    "resolution": "Day"
}

}

我的问题是数据系列在顶部被切断。 正如你在这里看到的： 在此处查看图表照片

对我来说很重要的是 yAxis 将在 0% 到 100% 之间 我将能够看到所有数据。 就我而言，数据超出并上涨超过 100%。

Answer 1

此行为背后的原因是 y 轴极值是数值而不是百分比，这意味着您实际上设置的是 0 到 100 的极值，而不是 0% 到 100%。您可以调整数据集以适应使用

labels.formatter()

设置 0-100 范围或格式化 y 轴标签，以便 y 轴标签实际显示 0% 到 0% 的百分比范围100%。

  yAxis: {
    labels: {
        formatter: function () {
            const range = this.axis.max - this.axis.min;
            const valueInPercent = ((this.value - this.axis.min) / range) * 100;
            return Highcharts.numberFormat(valueInPercent, 0) + '%';
        }
    }
}

演示：https://jsfiddle.net/BlackLabel/54f9ytco/

API： https://api.highcharts.com/highcharts/yAxis.labels.formatter