Highcharts: Hiển thị điểm đánh dấu đặc biệt trên biểu đồ cột

Question

Tôi muốn đặt điểm đánh dấu trên biểu đồ cột.

Để biểu đồ chính xác là biểu đồ cho các lần chạy được ghi trong mỗi trận đấu trong trò chơi cricket. (một biểu đồ được tạo mẫu kể từ bây giờ: http://img839.imageshack.us/img839/6091/screenshot20111117at124.png)

Bây giờ những gì tôi thực sự muốn hiển thị trong đó trên wicket rơi (giống như: http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Dudley_Nourse_Graph.png/350px-Dudley_Nourse_Graph.png), các chấm màu xanh trên đầu các cột.

Có thể thực hiện điều này trong highcharts không? Tôi thấy một đoạn trích này trong biểu đồ này (giống như mặt trời được mô tả ở đây: http://www.highcharts.com/demo/spline-symbols).

Answer 1

Trong data mảng bạn có thể chỉ định các tùy chọn cho một điểm cụ thể (chẳng hạn như một điểm đánh dấu tùy chỉnh để hiển thị):

[...] 
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] 

     }, 
[...] 

Dù sao tôi không nghĩ rằng có thể đặt điểm đánh dấu trên các yếu tố biểu đồ.

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

Answer 2

Tôi đã có một thách thức tương tự, nơi tôi cần thiết để đặt biểu tượng cụ thể trên đỉnh cột của tôi:

Để đạt được điều này, tôi đã sử dụng formatter callback:

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

Như bạn có thể thấy, bạn có thể đặt động một đường dẫn hình ảnh hoặc lớp phần tử dựa trên wh bất kể giá trị x/y/series/point/total/percent của bạn là bao nhiêu.

Cuối cùng, bạn cũng sẽ cần tăng maxPadding cho yAxis, nếu không biểu tượng/giá trị sẽ bị cắt (tùy thuộc vào kích thước biểu tượng, hiển nhiên).

Để nhìn thấy nó trong hành động với một số hình ảnh giữ chỗ 'năng động', có một cái nhìn tại jsFiddle này: http://jsfiddle.net/DMCXS/

Answer 3

Bạn có thể sử dụng hai loạt, cột đầu tiên, và phân tán thứ hai với điểm đánh dấu tùy chỉnh.

Ví dụ: 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] 

     }]