Markers/Circles in Spline chart in highcharts

问题:

I have a scenario where in i have to create markers/Circles in Spline chart. I created spline chart using highcharts, the code is below for the chart.

and my output should be like below. and i have marked the expected circles the image:

    $(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();
 });
});

How can i achieve this?

回答1:

You could use spline and scatter series with Draggable Points plugin.

Example: http://jsfiddle.net/0moy3q71/

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'
    }]

});

回答2:

Hopefully I understand your question correctly. I have created a spline chart. Focus on the August data where I explicitly define a standalone marker. Check this out .

Edited: I don't think it's achievable to move a pointer to a random place as each pointer must have values to both x and y axis. Don't think we can plot something that is floating around in Highcharts context. Not encouraging other HTML/javascript hacking around.

The best I can come out is this. Two series are created. Some points are hidden in the first series and only one big pointer available in second series.