Ẩn biểu đồ đánh dấu trục và đường lưới

80

Tôi đang cố gắng ẩn hoàn toàn trục và đường lưới của biểu đồ Highcharts. Cho đến nay tôi đã cố gắng đặt độ rộng của các dòng thành 0, nhưng nó không thành công.

xAxis: {
  lineWidth: 0,
  minorGridLineWidth: 0,
  lineColor: 'transparent'
}

Có thể chỉ vô hiệu hóa toàn cục các đường trục / tích tắc và đường lưới để tạo ra một âm mưu "đơn giản" không?

charts highcharts

— alex
nguồn

2

Dưới đây là làm thế nào để ẩn các yAxis

— Dan Dascalescu

150

Chỉ cần thêm

xAxis: {
   ...  
   lineWidth: 0,
   minorGridLineWidth: 0,
   lineColor: 'transparent',
   ...          
   labels: {
       enabled: false
   },
   minorTickLength: 0,
   tickLength: 0
}

theo định nghĩa xAxis.

Kể từ Phiên bản 4.1.9, bạn có thể chỉ cần sử dụng thuộc tính trục visible:

xAxis: {
    visible: false,
}

— dgw
nguồn

@dgw Điều này làm cho trục x trong suốt, nhưng nó vẫn chiếm không gian vật lý bên dưới dữ liệu. Có cách nào để cung cấp cho nó chiều cao là 0 không?

— Trevor Burnham

19

Đó là một chút quá mức cần thiết. HighCharts phải triển khai một thuộc tính đơn giản có tên là "hiển thị" sẽ chuyển đổi xem một trục có được hiển thị hay không. Tôi đã đăng nó như một yêu cầu tính năng và bạn có thể bỏ phiếu cho nó tại đây .

— Dan Dascalescu

2

minorGridLineWidthlà tài sản ít người biết đến mà tôi đang tìm kiếm. Cảm ơn!

— jetcom

1

@TrevorBurnham - Để xóa không gian vật lý có dấu tích, bạn cần đặt chart.spacing = [0, 0, 0, 0] (hoặc chỉ đặt bất kỳ trục nào, như chart.spacingLeft, thành 0, nếu bạn không muốn để loại bỏ tất cả khoảng cách). Đó là mảnh ghép còn thiếu đối với tôi cho câu hỏi này.

— Matthew Dean

1

tickLength: 0dường như là tất cả những gì tôi cần để ẩn dấu tích trên biểu đồ đường của mình.

— Hartley Brody

74

Đối với những người yAxisbạn cũng sẽ cần:

gridLineColor: 'transparent',

— Zac Morris
nguồn

1

Bạn cũng cần phải đặt title.textđể null? Dù sao, HighCharts cũng chỉ nên triển khai một thuộc tính đơn giản có tên là "hiển thị" có thể chuyển đổi xem một trục có được hiển thị hay không. Tôi đã đăng nó như một yêu cầu tính năng và bạn có thể bỏ phiếu cho nó tại đây .

— Dan Dascalescu

cài đặt gridLineColorđể transparentcó thể xóa sớm các đường lưới nếu bạn vẫn còn các trục khác cần xóa. Hãy xem ví dụ này .

— Dan Dascalescu

28

Nếu bạn có phiên bản lớn hơn v4.9 của Highcharts, bạn có thể sử dụng visible: falsetrong cài đặt xAxisvà yAxis.

Thí dụ:

$('#container').highcharts({

    chart: {
        type: 'column'
    },

    title: {
        text: 'Highcharts axis visibility'
    },

    xAxis: {
        visible: false
    },

    yAxis: {
        title: {
            text: 'Fruit'
        },
        visible: false
    }

});

— onetwo12
nguồn

6

Đây là câu trả lời hay nhất

— micapam

21

bạn cũng có thể ẩn đường lưới trên yAxis như:

yAxis:{ 
  gridLineWidth: 0,
  minorGridLineWidth: 0
}

— Shweta Bhagwat
nguồn

5

tôi quản lý để tắt của tôi chỉ với

       lineColor: 'transparent',
       tickLength: 0

— Ben
nguồn

2

Nếu bạn không muốn chạm vào đối tượng cấu hình, bạn chỉ cần ẩn lưới bằng css:

.chart-container .highcharts-grid {
   display: none;
}

— Iran Reyes
nguồn

0

Điều này luôn hoạt động tốt đối với tôi:

yAxes: [{
         ticks: {
                 display: false;
                },

— 0365Chris
nguồn