Highcharts => Lấy id của một điểm khi nhấp vào biểu đồ đường

Question

Tôi đang xây dựng biểu đồ đường và tôi muốn, khi tôi nhấp vào một điểm của đường, để hiển thị cửa sổ bật lên chứa một số dữ liệu về điểm này. Vấn đề tôi cố gắng giải quyết là lấy id, chuỗi liên kết với điểm này hoặc thứ gì đó tương tự.

Đây là mã của tôi:

plotOptions: { 
     column: { 
     pointWidth: 20 
     }, 

     series: { 
     cursor: 'pointer', 
     events: { 
      click: function(event) { 
      requestData(event.point); 
      } 
     } 
     } 

tôi đã cố gắng

requestData(this.point) 

,

requestData(this.point.id) 

cũng nhưng nó không hoạt động.

Làm cách nào để nhận được id của một điểm?

Cảm ơn rất nhiều.

Answer 1

Theo tài liệu, event.point giữ con trỏ đến điểm gần nhất trên biểu đồ.

Vì vậy, tôi muốn viết event.point vào bảng điều khiển và xem những gì có sẵn.

console.log(event.point); 

From the docs:

nhấp chuột: Hỏa hoạn khi series được nhấp. Từ khóa này đề cập đến chính đối tượng chuỗi. Một tham số, sự kiện, được chuyển đến hàm. Điều này chứa thông tin sự kiện phổ biến dựa trên jQuery hoặc MooTools tùy thuộc vào thư viện nào được sử dụng làm cơ sở cho Highcharts. Ngoài ra, event.point giữ con trỏ đến điểm gần nhất trên biểu đồ.

Ví dụ dựa trên ví dụ từ các tài liệu:http://jsfiddle.net/5nTYd/

Nhấp vào một điểm, và đánh dấu vào giao diện điều khiển.

Answer 2

Tôi chỉ làm điều này bằng cách truyền 3 đối tượng vào mảng dữ liệu chuỗi và sau đó kéo nó ra khỏi thuộc tính cấu hình của đối tượng từ nhấp chuột.

Vì vậy, bạn có thể xây dựng của bạn một cái gì đó dữ liệu chuỗi như thế này:

series: [{ 
    name: 'Example', 
    yAxis: 0, 
    type: 'spline', 
    data: [[1294099200000,220.0,37],[1296432000000,190.0,40],[1297036800000,184.4,5]] 
}] 

Trong thuộc tính dữ liệu trên các yếu tố 1 là ngày (x), yếu tố thứ 2 là một điểm dữ liệu (y), và 3 là id của đối tượng đại diện cho đối tượng dữ liệu đó. Chữ "z" này sẽ không hiển thị trên biểu đồ nhưng sẽ hiển thị dưới dạng phần tử thứ 3 trong mảng cấu hình. Ví dụ: sử dụng plotOptions thuộc tính điểm để nắm bắt những cú nhấp chuột, ID của đối tượng đang trong cảnh báo như this.config [2]

plotOptions: { 
    series: { 
     cursor: 'pointer', 
     point: {events: {click: function() {console.log(this); alert('Category: '+ this.category +', value: '+ this.y + 'Series: ' + this.series.name + ' ID: ' + this.config[2])}}} 
    } 
    }, 

Answer 3

tôi tìm thấy bài cũ này trong tìm kiếm của tôi để ==> thêm điểm đánh dấu đến một thời điểm khi tôi nhấp vào "Đường xu hướng" của Highcharts [trong ví dụ: biểu đồ "dòng thời gian-series"] [khi tôi nhấp vào bất kỳ đâu trên chính đường vẽ].tốt, không hiển thị quá nhiều mã, hãy xem trong số

cursor: 'pointer', 
        point: { 
         events: { 
          click: function(e) { 
           alert("X("+this.x+"),Y("+this.y+")"); 
           }//click 
          }//events 
          }//point 

nếu bạn muốn biết thêm chi tiết, tôi rất vui được cung cấp!

Answer 4

Trả lại 'ID' của điểm đã chọn trên bảng xếp hạng sử dụng 'X' giá trị:

plotOptions: { 
    series: { 
     cursor: 'pointer', 
     events: { 
      click: function(event) { 
        // Log to console 
       console.log(event.point); 
       alert(this.name +' clicked\n'+ 
         'Alt: '+ event.altKey +'\n'+ 
         'Control: '+ event.ctrlKey +'\n'+ 
         'Shift: '+ event.shiftKey +'\n'+ 
         'Index: '+ event.point.x); 
      } 
     } 
    } 
}, 

Xem ví dụ ở đây: http://jsfiddle.net/engemasa/mxRwg/

Answer 5

tôi đã cùng một vấn đề ... nếu Tôi hiểu chính xác. Giải pháp của tôi là thế này, để có được id của series ... Xem nếu nó giúp ...

plotOptions{ 
series:{ 
    cursor: 'pointer', 
    events: { 
     click: function(event) { 
     console.log(event.point.series.userOptions.id); 
     } 
    } 
    } 

Answer 6

plotOptions: { 
    series: { 
    cursor: 'pointer', 
    point: { 
     events: { 
     click: function() { 
      console.log(this); 
      alert('Category: '+ this.category +', value: '+ this.y + 'Series: ' + this.series.name + ' ID: ' + this.config[2]) 
     } 
     } 
    } 
    } 
},