javascript - 直方图钟形曲线上的正确旗帜位置

Question

我正在为一个项目使用直方图钟形曲线，除了如图所示的标志位置外，一切正常。

这是我的 jsfiddle 的链接 https://jsfiddle.net/8q1t3mwb/4

var data = [1,2,3,4,5,6,7,8,9,10];

Highcharts.chart('container', {

    title: {
        text: 'Bell curve'
    },

    xAxis: [{
        title: { text: 'Data' }
    }, {
        title: { text: 'Bell curve' },
        opposite: true
    }],

    yAxis: [{
        title: { text: 'Data' }
    }, {
        title: { text: 'Bell curve' },
        opposite: true
    }],

    series: [{
        name: 'Bell curve',
        type: 'bellcurve',
        id:'dataseries',
        xAxis: 1,
        yAxis: 1,
        baseSeries: 1,
        zIndex: -1,
        color: {
            linearGradient: {
                x1: 0,
                y1: 0,
                x2: 1,
                y2: 0
            },
            stops: [
                [0, 'rgb(255, 255, 255)'],
                [1, 'rgb(200, 200, 255)']
            ]
        }
    }]
});

在此处查看完整代码，https://jsfiddle.net/8q1t3mwb/4

Answer 1

您会看到它们当前所在的点，因为您的标志位于散点轴上。如果打开散点，您会看到这一点。

因此，如果您为标志系列设置以下内容:

{
  yAxis: 1,
  xAxis: 1,
  name: 'Pointer',
  type: 'flags',
  ...
}

并根据钟形曲线上的数字调整您的 x 值，您将能够看到连接到曲线的标志。

工作示例: https://jsfiddle.net/ewolden/8q1t3mwb/6/