highchart: thêm hình ảnh vào trên cùng của biểu đồ trên mỗi cột

Question

Có ai biết nếu nó có thể tạo ra một cái gì đó như thế này trong Highcharts:

Đó là về các biểu tượng thời tiết trên đỉnh. Tôi đã thêm chúng dưới dạng "đồ thị phân tán" rất đẹp, vì vậy hình ảnh/biểu đồ có thể bị tắt. Nhưng tôi muốn họ luôn đứng đầu. Ví dụ: y = 20px hoặc gì đó. Có thể làm điều này với Highchart không? Tôi biết đặt dữ liệu của họ thành "30 celcius" nhưng điều đó sẽ làm hỏng đồ thị nếu nhiệt độ tăng lên đến 30 độ.

Answer 1

Vì highcharts chỉ là SVG, bạn luôn có thể truy cập trực tiếp và thao tác SVG để hiển thị hình ảnh bạn muốn, thường chỉ với CSS. Bạn có thể kiểm tra biểu đồ bằng trình kiểm tra web của Chrome và tìm các yếu tố bạn muốn tạo kiểu. Tôi phải cảnh báo bạn rằng mặc dù bản thân các bản highcharts tùy chỉnh trong quá khứ đã nâng cấp lên các phiên bản mới hơn một cách khó khăn.

Answer 2

Bạn có thể sử dụng một thủ thuật có hai x-trục, một với hình ảnh và offset'ed lên đầu bảng xếp hạng và một với các nhãn thông thường ở phía dưới:

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'] 
}], 

Full dụ trên jsfiddle

Answer 3

bạn có thể thêm một scatter âm mưu series của bạn có chứa cụ thể markers: http://jsfiddle.net/ZZ7Kd/135/

01.

Answer 4

Bạn có thể sử dụng Renderer.image() để thêm hình ảnh vào bất cứ vị trí trên bảng xếp hạng

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

Answer 5

Tôi tìm thấy một giải pháp một cách tình cờ vì một mã khai thác gỗ Tôi quên để loại bỏ. Bạn có thể truy cập dữ liệu bên trong trình định dạng phương thức bằng cách sử dụng "this":

... 
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+'" />'; 
      }, 
     } 
    ... 

Mã này chắc chắn không hoạt động, nhưng hiển thị ý tưởng, phải không? Hy vọng điều đó sẽ hữu ích!