Highcharts: Thêm hình ảnh có thể nhấp vào mỗi xAxis gridLine

Question

Tôi đang xây dựng trong một số chức năng tùy chỉnh nơi người dùng có thể nhấp vào điểm dữ liệu trong biểu đồ đường để thêm ghi chú vào ngày đó. Điều này hơi gây nhầm lẫn vì các ghi chú không thực sự được gắn với chính các số liệu mà đúng hơn là ngày mà nó ghi lại. Nói cách khác, nếu tôi có 6 dòng trên một biểu đồ đường kéo dài từ ngày 01/01/12 - 01/08/12, một ghi chú duy nhất vào ngày 01/05/12 sẽ áp dụng cho tất cả 6 dòng. Vì vậy, bạn có thể tưởng tượng nhấp vào điểm dữ liệu trên một trong 6 chuỗi hoặc ngày 01/05/12 sẽ đánh lừa người dùng tin rằng ghi chú này sẽ được áp dụng cho điểm dữ liệu đó, chứ không phải toàn bộ ngày và chuỗi bất kỳ đất vào ngày đó.

Vì vậy, để khắc phục vấn đề khả năng sử dụng này, tôi đã quyết định rằng dấu hiệu trực quan tốt nhất là một cái gì đó như thế này:

Sẽ có một biểu tượng nhấp được ở phía trên cùng của mỗi Xaxis Gridline mà có cần phải mở rộng với lưới xAxis gridLine (như nếu người dùng chọn một khu vực để phóng to).

Đề xuất về cách tốt nhất để tắt tính năng này? Tôi chỉ cần một gợi ý về cách tốt nhất để thêm biểu tượng vào mỗi dòng ... Tôi có tất cả chức năng sau khi nhấp chuột đã được tạo.

Answer 1

Xây dựng dựa trên đề xuất của Mark bằng cách sử dụng redraw sự kiện để định vị hình ảnh và sử dụng load sự kiện để tạo chúng. Thêm chúng vào load là cần thiết để làm cho chúng có sẵn trong khi xuất và bạn cũng không muốn tạo hình ảnh mới trên mỗi redraw.

Những sự kiện biểu đồ được sử dụng:

events: { 
    load: drawImages, 
    redraw: alignImages 
} 

Trong drawImages chức năng Tôi đang sử dụng dịch ngược cho Xaxis đến vị trí các hình ảnh trên bảng xếp hạng:

x = chart.plotLeft + chart.xAxis[0].translate(i, false) - imageWidth/2, 
y = chart.plotTop - imageWidth/2; 

và sau đó thêm chúng và thiết lập trình xử lý nhấp chuột, zIndex, con trỏ chuột:

chart.renderer.image('http://highcharts.com/demo/gfx/sun.png', x, y, imageWidth, imageWidth) 
    .on('click', function() { 
     location.href = 'http://example.com' 
    }) 
    .attr({ 
     zIndex: 100 
    }) 
    .css({ 
     cursor: 'pointer' 
    }) 
    .add(); 

Trong alignImages Chức năng attr được sử dụng để đặt giá trị x và y mới cho các hình ảnh được tính theo cách tương tự như trong drawImages.

Full dụ trên jsfiddle

Ảnh chụp màn hình:

Answer 2

Vài ý tưởng. Đầu tiên, tôi sẽ sử dụng biểu đồ sự kiện redraw để biết khi nào biểu đồ đang được vẽ lại (giả sử trên hình thu phóng). Sau đó, thứ hai, đặt hình ảnh của bạn một cách rõ ràng tại các vị trí quan tâm trục. Để có được những truy vấn đó trực tiếp từ DOM.

Sử dụng jQuery:

$('.highcharts-axis') //return an array of the two axis. 

Họ sẽ có svg "yếu tố văn bản" trẻ em với (x, y) vị trí.