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
相关产品推荐
相关产品推荐

