Highcharts: Показать специальный маркер на столбчатой ​​диаграмме

Question

Я хочу поставить маркеры на столбчатой ​​диаграмме.

Если быть точным, диаграмма предназначена для забегов, которые были забиты в каждой игре в крикет.(пример сгенерированного графика на данный момент: http://img839.imageshack.us/img839/6091/screenshot20111117at124.png)

Теперь, что я на самом деле хочу, это показать, в каком месте упала калитка (что-то вроде: http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Dudley_Nourse_Graph.png/350px-Dudley_Nourse_Graph.png), синие точки сверху столбцов.

Возможно ли достичь этого в старших чартах? Я вижу фрагмент этого в этой таблице (что-то вроде солнца, изображенного здесь: http://www.highcharts.com/demo/spline-symbols).

Answer 1

У меня была похожая проблема, когда мне нужно было разместить определенные значки поверх моих столбцов:

Для этого я использовал обратный вызов formatter:

plotOptions: {
  column: {
    dataLabels: {
      enabled: true,
      useHTML: true,
      formatter: function() {
        return '<div style="text-align:center"><div>' + this.y + '</div><div class="dynamic-class-' + this.series.name.toLowerCase() +'"><img src="/path/to/special/icon"></div></div>'; 
      },
      y: 0
    }
  }
}

Как вы можете видеть, вы можете динамически установить путь к изображению или класс элемента на основе того, какое значение у вас будет x / y / series / point / total / процент.

Наконец, вам также нужно увеличить maxPadding для yAxis, в противном случае значки / значения будут обрезаны (очевидно, в зависимости от размера значка).

Чтобы увидеть его в действии с некоторыми «динамическими» картинками-заполнителями, взгляните на этот jsFiddle: http://jsfiddle.net/DMCXS/

Answer 2

Вы можете использовать две серии, первый столбец и второй разброс с индивидуальным маркером.

Пример: http://jsfiddle.net/NDpu6/

 series: [{
            name: 'Tokyo',
            type:'column',
            data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]

        }, {
            name: 'New York',
            type: 'scatter',
            data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]

        }]

Answer 3

В массиве data вы можете указать параметры для конкретной точки (например, отображаемый пользовательский маркер):

[...]
 series: [{
         name: 'Tokyo',
         marker: {
            symbol: 'square'
         },
         data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, /* HERE >>> */{
            y: 26.5,
            marker: {
               symbol: 'url(/demo/gfx/sun.png)'
            }
         }, 23.3, 18.3, 13.9, 9.6]

      },
[...]

В любом случае, я не думаю, что возможно поставить маркер над элементом диаграммы.

http://www.highcharts.com/ref/#point-marker