Маркеры/круги в диаграмме сплайна в highcharts

Question

У меня есть сценарий, где я должен создавать маркеры/круги в карте Spline. Я создал сплайн-диаграмму с использованием высоких диаграмм, код ниже для диаграммы.

и мой выход должен быть как показано ниже. и я пометил ОЖИДАЕМОЕ кругами изображения:

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

Как я могу добиться этого?

Answer 1

Вы можете использовать сплайн и разбросанные серии с плагином Draggable Points.

Пример: 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' 
    }] 

}); 

Answer 2

Надеюсь, я правильно понимаю ваш вопрос. Я создал диаграмму spline. Сосредоточьтесь на данных августа, где я явно определяю автономный . Проверьте это out.

Отредактировано: Невозможно перенести указатель на случайное место, так как каждый указатель должен иметь значения как для оси x, так и для оси y. Не думайте, что мы можем построить что-то, что плавает в контексте Highcharts. Не поощряйте другие взлома HTML/javascript.

Лучшее, что я могу найти, это this. Созданы две серии. Некоторые пункты скрыты в первой серии и только один большой указатель доступен во второй серии.