Javascript 样条曲线图中的标记/圆

我有一个场景，在这个场景中，我必须在样条曲线图中创建标记/圆。 我使用highcharts创建了样条曲线图，下面是图表的代码

我的输出应该如下所示。我在图片上标出了预期的圆圈：

$（函数（）{
var图像；
var线，
标签，
形象,，
点击X，
clickY；
var start=功能（e）{
$（文档）.bind({
“mousemove.line”：步骤，
“mouseup.line”：停止
});
单击x=e.pageX-line.translateX；
//clickY=e.pageY-line.translateY；//如果绘图线也应垂直移动，则取消注释
}
var阶跃=函数（e）{
行。翻译（e.pageX-clickX，e.pageY-clickY）
如果（图像）{
image.translate（e.pageX-clickX，e.pageY-clickY）
}
如果（标签）{
label.translate（e.pageX-clickX，e.pageY-clickY）
}
}
var stop=函数（）{
$（文档）。解除绑定（“.line”）；
}
$（“#ao销售优化图”）.高图({
图表：{
类型：“样条线”，
间距：40，
间距：5，
间距：0，
spacingRight:10，
},
标题：{
文本：“”
},
副标题:{
文本：“”
},
图例：{
启用：false，
},
学分：{
已启用：false
},
出口：{
已启用：false
},  
xAxis：{
gridLineColor:“#eeeeee”，
网格线宽度：1，
键入：“日期时间”，
最小值：UTC日期（2010,0,1），
最大值：UTC日期（2020,0,1），
标签：{
已启用：false
},
绘图线：[{
颜色：“#004a80”，
dashStyle:'点'，
value:Date.UTC（2014,7,10），//行显示位置的值
宽度：5，//行的宽度
zIndex：“10”，
标签：{
文本：“”，
}
}],
宽度：0
},
打印选项：{
系列：{
线宽：4，
标记：{
填充颜色：'#FFFFFF'，
线宽：2，
线条颜色：“4b0081”，
国家：{
悬停：{
启用：对，
填充颜色：“0047ab”，
线条颜色：“fff”，
线宽：3，
}
},
}
}
},
亚克斯：{
最低：10000，
最高：100000，
gridLineColor:“#eeeeee”，
网格线宽度：1，
标题：{
文字：‘销售’，
风格：{
fontWeight：“粗体”，
字体大小：“14”
}
},
标签：{
格式化程序：函数（）{
返回值（this.y/1000）+“k”
}
},
宽度：0，
},
系列：SalesOptimizationGraphHhdata（）
}，功能（图表）{
label=chart.xAxis[0]。plotLinesAndBands[0]。label；
image=chart.xAxis[0]。plotLinesAndBands[0]。image；
line=chart.xAxis[0]。plotLinesAndBands[0]。svgElem.attr({
冲程：'#004a80'
})
.css({
“游标”：“指针”
})
.translate（0，0）
.on（'mousedown'，start）；
image=chart.renderer.image（'../../../Content/Img/ao chart scroller.png'，285,300,64,24）.attr({
zIndex:100
}).translate（0,0）.addClass（'image'）.on（'mousedown'，start）.add（）；
});
});

---

我怎样才能做到这一点

希望我能正确理解你的问题。我已经创建了一个

样条曲线

图表。重点关注8月份的数据，我在其中明确定义了一个独立的

标记

。看看这个

编辑：我认为将指针移动到随机位置是不可能的，因为每个指针都必须有指向x轴和y轴的值。不要以为我们能在海图的背景下描绘出一些漂浮的东西。不鼓励其他HTML/javascript黑客攻击

---

我能说的最好的就是。创建了两个系列。有些点在第一个系列中隐藏，在第二个系列中只有一个大指针可用。

您可以使用带有插件的样条线和散点系列

例如：

---

在序列线上我们可以创建标记，但是有没有办法，我们可以在图中的任意位置对齐？如图所示？我想这对我来说已经足够了！！非常感谢Wilts C@如果你满意的话，请用IamSarav标记作为回答：）是的，当然！！这对你的时间和helo Kacper都有好处！

    $(function () {
    var image;
    var line,
        label,
        image,
        clickX,
        clickY;

    var start = function (e) {
        $(document).bind({
            'mousemove.line': step,
            'mouseup.line': stop
        });

        clickX = e.pageX - line.translateX;
        //clickY = e.pageY - line.translateY; //uncomment if plotline should be also moved vertically
    }

    var step = function (e) {
        line.translate(e.pageX - clickX, e.pageY - clickY)
        if (image) {
            image.translate(e.pageX - clickX, e.pageY - clickY)
        }
        if (label) {
            label.translate(e.pageX - clickX, e.pageY - clickY)
        }
    }

    var stop = function () {
        $(document).unbind('.line');
    }

    $('#ao-salesoptimization-graph').highcharts({
        chart: {
            type: 'spline',
            spacingBottom:40,
            spacingTop: 5,
            spacingLeft: 0,
            spacingRight: 10,
         },
        title: {
            text: ''
        },
        subtitle: {
            text: ''
        },
        legend: {
            enabled: false,
        },
        credits: {
            enabled: false
        },
        exporting: {
            enabled: false
        },  
        xAxis: {
            gridLineColor: '#eeeeee',
            gridLineWidth: 1,
            type: 'datetime',
            min: Date.UTC(2010, 0, 1),
            max: Date.UTC(2020, 0, 1),
            labels: {
                enabled :false
            },
            plotLines: [{
                color: '#004a80',
                dashStyle: 'Dot',
                value: Date.UTC(2014, 7, 10), // Value of where the line will appear
                width: 5,// Width of the line
                zIndex: "10",
                label: {
                    text: '<span class="drag"></span>',
                }
            }],
            tickWidth: 0
        },
        plotOptions: {

            series: {
                lineWidth: 4,
                marker: {
                    fillColor: '#FFFFFF',
                    lineWidth: 2,
                    lineColor: "#4b0081",
                    states: {
                        hover: {
                            enabled: true,
                            fillColor: "#0047ab",
                            lineColor: "#fff",
                            lineWidth: 3,

                        }
                    },


                }
            }
        },
        yAxis: {
            min: 10000,
            max: 100000,
            gridLineColor: '#eeeeee',
            gridLineWidth: 1,            
            title: {
                text: 'Sales',
                style: {
                    fontWeight: "bold",
                    fontSize: "14"
                }
            },
            label: {
                formatter: function () {
                    return (this.y / 1000) + "k"
                }
            },
            tickWidth: 0,

        },
        series:  salesoptimizationgraphhData()
    }, function (chart) {
        label = chart.xAxis[0].plotLinesAndBands[0].label;
        image = chart.xAxis[0].plotLinesAndBands[0].image;
        line = chart.xAxis[0].plotLinesAndBands[0].svgElem.attr({
            stroke: '#004a80'
        })
          .css({
              'cursor': 'pointer'
          })
          .translate(0, 0)
          .on('mousedown', start);
            image = chart.renderer.image('../../../Content/Img/ao-chart-scroller.png', 285, 300, 64, 24).attr({
            zIndex: 100
        }).translate(0, 0).addClass('image').on('mousedown', start).add();
 });
});

var chart = new Highcharts.Chart({

    chart: {
        renderTo: 'container',
        animation: false
    },

    plotOptions: {
        series: {
            stickyTracking: false
        },
        scatter: {
            cursor: 'move'
        }
    },

    series: [{
        data: [[3,200],[5,123]],
        draggableY: true,
        draggableX: true,
        dragMinY: 0,
        type: 'scatter'
    }, {
        data: [0, 71.5, 106.4, 129.2, 144.0, 176.0],
        type: 'spline'
    }]

});