You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Highcharts面积图起始与结束点渲染异常问题求助

Highcharts面积图起始与结束点渲染异常问题求助

大家好,我最近在用Highcharts制作一个面积图,X轴有3个分类值,Y轴对应3个数据点,但遇到了个头疼的问题:X轴的起始点和结束点没有正确延伸到图表边缘,而是从中间位置开始、在中途就结束了。我已经尝试设置startOnTick: true和endOnTick: true,但还是没能解决这个问题。

下面是我的完整图表配置代码,麻烦各位大佬帮忙排查下问题所在:

Highcharts.chart('container', {
    title: {
        text: 'High chart generation'
    },
    chart: {
        type: 'area',
        height: 233,
        width: 678,
        borderColor: '#cccccc',
        borderWidth: 2,
        borderRadius: 5
    },
    xAxis: {
        gridLineColor: 'transparent',
        labels: {
            style: {
                color: 'Arial Black',
                font: '9pt Arial'
            }
        },
        categories: ['Feb-2024', 'Feb-2025', 'Feb-2026'],
        min: 0,
        max: 2,
        startOnTick: true,
        endOnTick: true
    },
    credits: {
        enabled: false
    },
    yAxis: {
        tickInterval: 1,
        plotBands: [{
            color: '#FFC1C1',
            from: 2,
            to: 3
        }, {
            color: '#EE6363',
            from: 3,
            to: 4
        }],
        min: 0,
        max: 4,
        gridLineColor: 'transparent',
        labels: {
            style: {
                color: 'Arial Black',
                font: '9pt Trebuchet MS, Arial Black, sans-serif'
            }
        },
        title: {
            enabled: false
        },
        startOnTick: true,
        endOnTick: true
    },
    plotOptions: {
        area: {
            stacking: 'normal',
            step: 'normal'
        },
        series: {
            fillOpacity: 0
        }
    },
    series: [{
        name: '',
        marker: {
            enabled: false
        },
        data: [0.5, 0.25, 0.25],
        color: '#8B4726',
        showInLegend: false,
        lineWidth: 3
    }],
    subtitle: {
        text: "<span style='background-color: #ff6666;color:black; border-radius: 2px; padding: 1px 2px;'> abc </span> <span style='background-color: #ce2727;color:black; border-radius: 2px; padding: 1px 2px;'> def </span>",
        useHTML: true,
        verticalAlign: 'bottom'
    }
});

引入的Highcharts相关脚本(注:末尾内容存在截断):

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/stock.js"></script>
<script src="https://code.highcharts.com/maps/modules/map.js"></script>
<script src="https://code.highcharts.com/modules/gantt.js"></script>
<script src="https://code.highcharts.com/dashboards/datagrid.js"></script>
<script src="https://code.highcharts.com/dashboards/dashboards.js"></script>
<script src="https://code.highcharts.com/dashboards/modules/layout.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/parallel-coordinates.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/modules/annotations-advanced.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/draggable-points.js"></script>
<script src="https://code.highcharts.com/modules/static-scale.js"></script>
<script src="https://code.highcharts.com/modules/broken-axis.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/tilemap.js"></script>
<script src="https://code.highcharts.com/modules/timeline.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<script src="https://code.highcharts.com/modules/treegraph.js"></script>
<script src="https://code.highcharts.com/modules/item-series.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<script src="https://code.highcharts.com/modules/histogram-bellcurve.js"></script>
<script src="https://code.highcharts.com/modules/bullet.js"></script>
<script src="https://code.highcharts.com/modules/funnel.js"></script>
<script src="https://code.highcharts.com/modules/funnel3d.js"></script>
<script src="https://code.highcharts.com/modules/pyramid3d.js"></script>
<script src="https://code.highcharts.com/modules/networkgraph.js"></script>
<script src="https://code.highcharts.com/modules/pareto.js"></script>
<script src="https://code.highcharts.com/modules/pattern-fill.js"></script>
<script src="https://code.highcharts.com/modules/price-indicator.js"></script>
<script src="https://code.highcharts.com/modules/sankey.js"></script>
<script src="https://code.highcharts.com/modules/arc-diagram.js"></script>
<script src="https://code.highcharts.com/modules/dependency-wheel.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
<script src="https://code.highcharts.com/modules/sonification.js"></script>
<script src="https://code.highc..."></script>

内容来源于stack exchange

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.04.08 03:10:32