Số lần hiển thị trục x đáp ứng C3.js

Question

Tôi đang cố gắng tạo biểu đồ có thể trông đẹp trên cả thiết bị di động và máy tính để bàn bằng c3 (http://c3js.org/).

Tuy nhiên, tôi gặp sự cố khi nhận trục x, là một bộ đếm thời gian, để hiển thị kích thước thay đổi cho thiết bị di động. Cách duy nhất tôi quản lý để làm điều này là phá hủy đồ thị và tạo lại nó từ đầu. Nhưng điều này ngăn cản tôi bổ sung một quá trình chuyển đổi tốt đẹp vào biểu đồ, điều này thực sự rất hay. [! [Xem desktop] [1]] [1]

tôi đã cố gắng sử dụng đánh dấu chọn lọc tùy chọn trên trục x và đặt một giá trị tối đa là 8, nhưng tùy chọn này bị bỏ qua khi sử dụng một trong hai flush() hoặc thay đổi kích thước() phương pháp.

Vì vậy, câu hỏi của tôi là: có cách nào để thay đổi giá trị trục x mà không phải phá hủy biểu đồ và tạo lại không? http://imgur.com/EMECqqB

Answer 1

Tôi đã sử dụng các onresized: function() {...}

hoặc bạn có thể sử dụng onresize: function() { ... }

link

để thay đổi tối đa tiêu huỷ trên màn hình thay đổi kích cỡ:

 axis: { 
      x: { 
       type: 'timeseries', 
       tick: { 
        culling: true, 
        format: '%m-%d', 
        fit:true, 
        culling: { 
         max: window.innerWidth > 500 ? 8 : 5 
        } 
       } 
      } 
     }, 

     onresized: function() { 
      window.innerWidth > 500 ? chart.internal.config.axis_x_tick_culling_max = 8 : chart.internal.config.axis_x_tick_culling_max = 5; 
     }, 

Dưới đây là một ví dụ : https://jsfiddle.net/07s4zx6c/2/

Answer 2

thêm mediaquery theo kích thước thiết bị

như thế này.

@media screen and (max-width:810px) { 
    .c3 svg { font: .8em sans-serif; } 
}