Highcharts phân tán biểu đồ với một tên cho mỗi điểm

Question

Tôi đang cố gắng để tinh chỉnh một biểu đồ phân tán Highcharts với hàng loạt ngày này

series: [{ 
    data: [[1,2],[2,5]] 
}] 

để tôi có thể đặt một tên trên mỗi điểm, tôi muốn hiển thị tên trong chú giải công cụ. Các API doc says một đối tượng của giá trị tên có thể được định nghĩa như thế này

series: [{ 
    data: [{ 
     name: 'Point 1', 
     x: 1, 
     y: 2 
    }, { 
     name: 'Point 2', 
     x: 2, 
     y: 5 
    }] 
}] 

nhưng có vẻ như các giá trị x và y không nhặt. Xem ví dụ jsfiddle của tôi.

Answer 1

Như đã nêu trong documentation, trường tên là tên của điểm như được hiển thị trong chú giải, chú giải công cụ, dữ liệuLabel, v.v. Tôi updated your fiddle để bao gồm thư viện highcharts và tôi thấy hành vi này (tức là nếu tôi di chuột qua một điểm, nhãn của nó sẽ được hiển thị).

Nếu bạn muốn đặt nhãn trục x chính xác, bạn cần đảm bảo rằng phần xAxis trong cấu hình biểu đồ của bạn không có khóa categories.

Answer 2

Bạn cũng có thể hiển thị tên trong phần chú giải. Cập nhật câu trả lời đã chọn ở trên here

series: [{ 
     name: 'Point 1', 
     data: [[3, 3]] 
    }, { 
     name: 'Point 2', 
     data: [[4, 8]] 
    }, { 
     name: 'Point 3', 
     data: [[9, 15]] 
    }] 

Answer 3

Đây là tính năng mới trong HighCharts 3.0. Bạn cần phải xác định loại Xaxis để 'loại' và đưa ra tên của các điểm trong các dữ liệu nếu bạn muốn nó xuất hiện trên Xaxis:

xAxis: { 
    //categories: ['Green', 'Pink'], 
    type: 'category' 
}, 
... 
data: [{ 
     name: 'Green', 
     x: 1, 
     y: 2 
    }, { 
     name: 'Pink', 
     x: 2, 
     y: 5 
    }] 

Xem mã jsFiddle của bạn Cập nhật: here. Lưu ý rằng tôi đã thêm tính năng định dạng tooltip để cho thấy rằng point.x không có ý nghĩa gì trong ngữ cảnh này, chỉ point.name vẫn còn liên quan.
Ngoài ra, bạn không thể có hai điểm với 'tên' khác nhau ở cùng một vị trí x.

Answer 4

Câu trả lời này hoạt động đối với Highcharts 4.1.9.

Đã cho tôi một thời gian dài để tìm ra vì vậy tôi muốn vượt qua nó trong trường hợp ai đó đang tìm kiếm điều này là tốt.

Số dặm của bạn có thể thay đổi đối với các phiên bản khác.

 plotOptions: { 
      scatter: { 
       dataLabels: { 
        format: "{point.name}", 
        enabled: true 
       }, 
       enableMouseTracking: false 
      } 
     }, 
     series: [{ 
      name: 'Projects', 
      data: [{"name":"Point 1", "x":1,"y":2}, {"name":"Point 2", "x":4,"y":5}] 
     }] 

Điểm mấu chốt là gì?

1. Đảm bảo rằng các scatter.dataLabels được kích hoạt và định dạng là {point.name}
2. Đảm bảo rằng các dữ liệu có định dạng của {"name":"Point 1", "x":1,"y":2}

Answer 5

Như đã đề cập trong this comment, những gì làm việc cho tôi trong Highcharts 5.0.6 là:

{ 
    type: 'scatter', 
    tooltip: { headerFormat: '<strong>{point.key}</strong><br>' }, 
    data: [{ x: 0, y: 1, name: 'Whatever' }, ...] 
} 

Answer 6

Tôi gặp khó khăn với vấn đề này và sau khi tìm giải pháp trong tài liệu tôi phải nói rằng hành vi như được thiết kế tạo ra một chút bất ngờ.

mỗi tài liệu (ở đây: https://api.highcharts.com/highcharts/plotOptions.scatter.tooltip), các tooltip không hiển thị tất cả các lĩnh vực mà bạn có thể thêm vào một điểm dữ liệu, mà là

Defaults to x: <b>{point.x}</b><br/>y: <b>{point.y}</b><br/>.

Để hiển thị tên điểm dữ liệu (và bất kỳ lĩnh vực khác bạn muốn), chỉ cần thay đổi HTML được hiển thị bằng chú giải công cụ. Ví dụ: bạn có thể hiển thị tên điểm và tọa độ trong chú giải công cụ trong khi xóa tên chuỗi như sau:

chart: { 
    type: "scatter", 
} 
tooltip: { 
    headerFormat: '', 
    pointFormat: 'Name: <b>{point.name}</b><br/>Load time: <b>{point.y}</b><br/>Requests: <b>{point.x}</b>', 
},