Cách ngăn chặn chồng chéo cột trong Highcharts

Question

Tôi tin rằng đây là một câu hỏi chung không cần nhiều thông tin từ dữ liệu highcharts của tôi.

Tôi muốn ngăn các cột chồng lên nhau/chồng lên nhau, làm cách nào để thực hiện việc này?

Xem hình ảnh-link dưới đây về cách bây giờ nó là

http://highslide.com/forum/download/file.php?id=3157

jsfiddle: http://jsfiddle.net/Dzs5q/

Answer 1

Hãy thử và sao chép các lỗi ở đây @http://jsfiddle.net/jugal/bgNBG/

Highcharts theo mặc định thông minh làm giảm độ rộng của các cột nếu có quá nhiều trong số họ để tránh chồng chéo .

Các cột sẽ có khuynh hướng trùng nếu bạn đã ghi đè hành vi mặc định nói trên bằng cách xác định column.pointWidth

column: {   
     pointWidth : 10 
    } 

ví dụ: @http://jsfiddle.net/jugal/bgNBG/2/

Vì vậy, để tránh trùng lặp, tôi thấy hai tùy chọn mà bạn có.

Tùy chọn # 1. Tháo column.pointWidth
này sẽ làm cho cột mỏng để không chồng chéo
ví dụ: @http://jsfiddle.net/jugal/bgNBG/

Lựa chọn 2 #. Sử dụng column.dataGrouping
Điều này sẽ giúp có chiều rộng cột cố định, nhưng giảm (bằng cách nhóm chúng) số lượng cột thay thế để tránh lộn xộn/chồng chéo.

dataGrouping = { 
    groupPixelWidth: 40, // Minimum width for each column 
    units: [[   // Permissible groupings 
     'day', 
     [1, 2, 3,4,5,6] // 1,2,3,4,5,6 days may be grouped into 1 column 
     ]] 
} 

ví dụ: @http://jsfiddle.net/jugal/JraJW/4/
Câu hỏi tương tự @https://stackoverflow.com/a/12354111/1566575

Answer 2

Cách tốt nhất để kiểm soát các cột và chắc chắn rằng họ không chồng/chồng chéo lên nhau bằng cách kiểm soát chiều rộng của biểu đồ. bạn có thể làm điều này trong phạm vi có chứa <div>.

• CSS: min-width ~ cho phép div thay đổi kích thước nhưng hạn chế kích thước đó đi dưới một chiều rộng nhất định. Bạn làm điều này bởi vì bạn biết một khi nó là theo chiều rộng công cụ bắt đầu mờ với nhau và không đọc được.
• CSS: width ~ buộc chiều rộng của biểu đồ cho phép là một giá trị nhất định.
• CSS: no width set ~ thông báo nếu bạn thu nhỏ cửa sổ trình duyệt xuống xa nó bắt đầu làm cho biểu đồ không đọc được.

Bằng cách kiểm soát chiều rộng của div chứa và xoay nhãn như c0deNinja đề xuất, bạn có thể ngăn chặn hầu hết các vấn đề chồng chéo/chồng chéo. Tuy nhiên, nếu biểu đồ của bạn có nhiều chuỗi/điểm dữ liệu, ngay cả điều này cũng không giúp ích gì.

Answer 3

Vấn đề của tôi là tương tự và tôi đã nhận được hư không với các giải pháp mà chuyển mục vào thứ trục vv Sau đó, tôi phát hiện trục x của tôi đã được công nhận như một sự liên tục (trong trường hợp này là: ngày tháng) và hai cột chồng lên nhau dĩ nhiên chia sẻ cùng một giá trị x.

Tôi giải quyết vấn đề bằng cách chọn trục x, tìm thấy tùy chọn được gọi là "loại trục" và bỏ chọn "tự động chọn dựa trên dữ liệu" để thay đổi thành "trục văn bản". Điều đó có các cột của tôi cạnh nhau.

Một chút quá hạn cho vấn đề của bạn nhưng có thể hữu ích.