2013-05-14 1 views
1

Я бы хотел, чтобы диаграмма рассеяния могла автоматически показывать рядом с каждой точкой PLOT или BUBBLE, фрагмент текста, идентифицирующий его.Есть ли какой-либо способ в Highcharts для автоматического отображения ярлыков/текста на диаграмме разброса?

Here is an example of what i am trying to achieve

Любая помощь будет очень признателен !!

ответ

6

Вам нужно имя в данных, а также добавить dataLabel в серии, проверьте это:

series: [{ 
     dataLabels: { 
      enabled: true, 
      x:40, 
      formatter:function() { 
       return this.point.name; 
      }, 
      style:{color:"black"} 
     }, 
     data: [{ 
      "x": 23, 
      "y": 22, 
      "z": 200, 
      "name":"point1" 
     }, { 
      "x": 43, 
      "y": 12, 
      "z": 100, 
      "name":"point2" 
     }] 
    }] 

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

+1

Большое спасибо за этот ответ - это сработало лакомство. Счастливый разработчик и многие счастливые клиенты, чтобы прийти;) –

+0

Спасибо. Любая идея, как это можно сделать, если данные загружаются из JSON? То есть бит 'function' может быть загружен только как строка. – jf328

+0

О, не волнуйся. Ответ ниже решает проблему. Просто нужно быть осторожным, чтобы он использовал ключевой «формат», а не ключевой «форматирующий» здесь. – jf328

2

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

$('#container').highcharts({ 

    chart: { 
     type: 'scatter' 
    }, 

    plotOptions: {    
     series: { 
      dataLabels: { 
       enabled: true, 
       format: '{series.name}', // make it show the name 
       x: 15, // place it on right side 
       y: 10 
      }, 
     }, 
     scatter: { 
      marker: { 
       radius: 10 
      } 
     } 
    }, 

    series: [ 
     { 
     name: 'A', 
     data: [[Math.random() * 100, Math.random() * 100]] 
     }, 
     { 
     name: 'B', 
     data: [[Math.random() * 100, Math.random() * 100]] 
     }, 
     { 
     name: 'C', 
     data: [[Math.random() * 100, Math.random() * 100]] 
     }, 
     { 
     name: 'D', 
     data: [[Math.random() * 100, Math.random() * 100]] 
     }, 
     { 
     name: 'E', 
     data: [[Math.random() * 100, Math.random() * 100]] 
     }, 
     { 
     name: 'F', 
     data: [[Math.random() * 100, Math.random() * 100]] 
     }, 
     { 
     name: 'G', 
     data: [[Math.random() * 100, Math.random() * 100]] 
     } 
    ] 
}); 

Fiddle here.

enter image description here

Смежные вопросы