javascript - setdata - Marcadores/Círculos en la tabla de Spline en Highcharts

highcharts test data

Question

Tengo un escenario en el que tengo que crear marcadores / círculos en la tabla de Spline. Creé spline chart usando Highcharts, el código está debajo para el gráfico.

y mi salida debería ser como a continuación. y he marcado los círculos esperados de la imagen:

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

¿Cómo puedo conseguir esto?

Answer 1

Espero comprender tu pregunta correctamente. He creado un gráfico spline . Céntrate en los datos de agosto donde defino explícitamente un marker independiente. Mira esto.

Editado: no creo que sea posible mover un puntero a un lugar aleatorio ya que cada puntero debe tener valores para los ejes xey. No piense que podemos trazar algo que está flotando en el contexto de Highcharts. No fomentando otros piratear HTML / javascript.

Lo mejor que puedo sacar es esto . Se crean dos series. Algunos puntos están ocultos en la primera serie y solo hay un gran puntero disponible en la segunda serie.

Answer 2

Puede usar series spline y scatter con el plugin Draggable Points .

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

});