高图表散点未对齐

Question

我有一个 Highcharts，它在顶部和底部有列范围和散点。 由于某种原因，散点没有完全对齐。

在此处的 codepen 中创建了一个简单版本。有人可以帮忙吗？

https://codepen.io/Ponmudi-VN/pen/mdgaGVr

Highcharts.chart('container', {
    chart: {
        type: 'columnrange'
    },
    plotOptions: {
        columnrange: {
            pointWidth: 2
        },
        scatter: {
            marker: {
              symbol: 'diamond',
                radius: 2
            }
        }
    },
    series: [{
        data: [
            [0, 5, 10],
            [1, 3, 8],
            [2, 6, 12],
          [3,5,15]
        ]
    }, {
        type: 'scatter',
        data: [
            [0, 10],
            [1, 8],
            [2, 12], 
          [3,5]
        ]
    }, {
        type: 'scatter',
        data: [
            [0, 5],
            [1, 3],
            [2, 6],
          [3,15]
        ]
    }]
});

  <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/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.highcharts.com/modules/stock-tools.js"></script> <script src="https://code.highcharts.com/modules/streamgraph.js"></script> <script src="https://code.highcharts.com/modules/sunburst.js"></script> <script src="https://code.highcharts.com/modules/variable-pie.js"></script> <script src="https://code.highcharts.com/modules/variwide.js"></script> <script src="https://code.highcharts.com/modules/vector.js"></script> <script src="https://code.highcharts.com/modules/venn.js"></script> <script src="https://code.highcharts.com/modules/windbarb.js"></script> <script src="https://code.highcharts.com/modules/wordcloud.js"></script> <script src="https://code.highcharts.com/modules/xrange.js"></script> <script src="https://code.highcharts.com/modules/no-data-to-display.js"></script> <script src="https://code.highcharts.com/modules/drag-panes.js"></script> <script src="https://code.highcharts.com/modules/debugger.js"></script> <script src="https://code.highcharts.com/modules/dumbbell.js"></script> <script src="https://code.highcharts.com/modules/lollipop.js"></script> <script src="https://code.highcharts.com/modules/cylinder.js"></script> <script src="https://code.highcharts.com/modules/organization.js"></script> <script src="https://code.highcharts.com/modules/dotplot.js"></script> <script src="https://code.highcharts.com/modules/marker-clusters.js"></script> <script src="https://code.highcharts.com/modules/hollowcandlestick.js"></script> <script src="https://code.highcharts.com/modules/heikinashi.js"></script> <div id="container"></div> 

Answer 1

这是一个众所周知的问题，目前正在 Highcharts 库中修复：https://github.com/highcharts/highcharts/issues/5334#issuecomment-2031787050。不幸的是，目前这个问题没有任何简单的解决方法，但我建议遵循该线程，因为它可能会在不久的将来得到解决。