highchart: dodawanie zdjęć do góry wykresu na każdej kolumnie

Question

Czy ktoś wie, czy jest możliwe, aby stworzyć coś takiego w Highcharts:

Chodzi o ikon pogodowych na szczycie. Dodałem je jako "wykres rozproszenia", co jest miłe, więc obrazy/wykres można wyłączyć. Ale chcę, żeby zawsze byli na szczycie. Na przykład: y = 20px lub coś podobnego. Czy można to zrobić z Highchart? Wiem, ustawić swoje dane na "30 celcius", ale to zepsułoby wykres, gdyby temperatura wzrosła do 30 stopni.

Answer 1

Biorąc pod uwagę, że highcharts to po prostu SVG, zawsze możesz przejść bezpośrednio i manipulować SVG, aby pokazać obrazy, które chcesz, zwykle tylko z CSS. Możesz sprawdzić wykres za pomocą przeglądarki internetowej Chrome i znaleźć elementy, które chcesz nadać stylu. Muszę was ostrzec, że samemu posiadanie niestandardowych highcharts utrudniało aktualizowanie do nowszych wersji.

Answer 2

Można użyć sztuczki mające dwa x-osie, jeden z obrazów i offset'ed do górnej części tabeli i jeden z typowych etykiet na dole:

xAxis: [{ 
    offset: -290, 
    tickWidth: 0, 
    lineWidth: 0, 
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], 
    labels: { 
     x: 5, 
     useHTML: true, 
     formatter: function() { 
      return '<img src="http://highcharts.com/demo/gfx/sun.png"><img>&nbsp;'; 
     } 
    } 
}, { 
    linkedTo: 0, 
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
}], 

Pełny przykład na jsfiddle

Answer 3

Możesz dodać kolejną scatter wykres na swojej series że zawiera specyficzny markers: http://jsfiddle.net/ZZ7Kd/135/

Answer 4

Można użyć Renderer.image(), aby dodać obrazy w dowolnym miejscu na wykresie

http://api.highcharts.com/highcharts#Renderer.image()

Answer 5

znalazłem rozwiązanie przez przypadek ze względu na kod logowania zapomniałem usunąć. Możesz uzyskać dostęp do danych wewnątrz metody formatyzatorem za pomocą „to”:

... 
plotOptions: { 
    series: { 
     dataLabels: { 
      useHTML: true, 
      enabled: true, 
      x: -50, 
      y: -50, 
      formatter: function(){ 
       console.log(this); 
       return '<span>'+this.y+'</span><br/>'+this.series+'<img src="'+this.key+'" />'; 
      }, 
     } 
    ... 

Kod ten na pewno nie działa, ale pojawia się pomysł, prawda? Mam nadzieję, że to pomoże!