2012-03-22 9 views
10

Khác với việc sử dụng biểu đồ cột và đặt tên thích hợp là có thể tạo biểu đồ trong api biểu đồ google?Làm cách nào để tạo một Biểu đồ bằng cách sử dụng api biểu đồ google?

+2

Ngoài sự khác biệt mỹ phẩm, trong một biểu đồ bạn sẽ xác định mỗi thanh như một loạt số và sau đó bất kỳ giá trị mà sẽ rơi vào phạm vi đó sẽ làm tăng số lần của thanh bằng 1. Thực tế sự khác biệt là theo hình thức nhập dữ liệu .Đối với biểu đồ, tôi có thể xác định chiều rộng thanh (tức là khoảng 10) và sau đó chỉ gửi một luồng số. –

Trả lời

6

Biểu đồ Google không có biểu đồ biểu đồ vì nó chỉ là thư viện hình ảnh hóa, bạn sẽ phải sửa đổi Column Chart để phù hợp với nhu cầu của mình. Tuy nhiên, tôi nghi ngờ lý do bạn không hài lòng với biểu đồ cột là do khoảng cách cột, trông không giống như biểu đồ. Vì vậy, tôi sẽ trả lời câu hỏi này trước tiên:

Bạn có thể kiểm soát khoảng cách giữa các cột trong biểu đồ cột không?

Không, không phải tại thời điểm này. Xem trích dẫn này từ số Google Charts Community

Không có hỗ trợ trong API để kiểm soát khoảng cách giữa các thanh. Bạn có thể hack nó nếu bạn sẵn sàng đào sâu vào SVG của biểu đồ.

Vì vậy, việc này có thể thực hiện được nhưng sẽ có thêm một số công việc từ bạn. Bạn cũng có thể chơi xung quanh với tùy chọn cấu hình chartArea sẽ có một số ảnh hưởng đến khoảng cách cột.

Tuy nhiên, câu hỏi ban đầu có thể có một câu trả lời khác nhau thực sự.

Bạn có thể tạo biểu đồ giống biểu đồ bằng cách sử dụng Biểu đồ cột không?

Trong khi bạn không thể kiểm soát khoảng cách giữa bộ cột trong một biểu đồ cột, bạn có thể nhận được các cột ép lên gần với nhau bằng cách xác định chúng cột như khác nhau, và sau đó thiết lập màu sắc của mỗi cột để cùng màu trong các tùy chọn cấu hình.

Dưới đây là một biểu đồ 3-cột đơn giản:

var data = google.visualization.arrayToDataTable([ 
    ['x', '1-10', '11-20', '21-30'], 
    ['', 3, 5, 4] 
    ]); 

    // Create and draw the visualization. 
    new google.visualization.ColumnChart(document.getElementById('visualization')). 
     draw(data, 
      {title:"My Histogram", 
      width:600, height:400, 
      hAxis: {title: null}, 
      colors: ['red','red','red'], 
      legend: {position: 'none'} 
      } 
    ); 

Chú ý bạn có 1 hàng với 3 cột đó là mỗi màu 'red'. Nhược điểm của việc này là bạn bị mất các nhãn dọc theo trục x cho bạn biết cột nào đại diện cho cái gì. Một lần nữa, bạn sẽ phải có một số loại logic để xây dựng biểu đồ này và điền dữ liệu theo cách bạn muốn.

Vì vậy, câu chuyện dài ngắn là Biểu đồ của Google không có Biểu đồ và trong khi đó là có thể với Biểu đồ cột, bạn có thể xem xét xem xét một thư viện khác.

+1

như @ ic3 đã nêu trong câu trả lời của anh ấy, giờ đây họ đã có https://developers.google.com/chart/interactive/docs/gallery/histogram –

7

Để thêm vào mattedgod của câu trả lời, Cột biểu đồ thể bây giờ sẽ được tạo ra với các thanh cách nhau chặt chẽ với nhau, sử dụng tùy chọn:

bar: {groupWidth:"100%"}; 
7

Google đã giới thiệu một vài ngày trước một biểu đồ histogram: link

+0

Bạn có thể xác định điều này một chút không, có thể bao gồm ví dụ? (không hoàn toàn cần thiết trong trường hợp này, nhưng làm cho một câu trả lời hấp dẫn hơn) – Shog9

+0

Nhấp vào liên kết cho một ví dụ, là tất cả những gì bạn cần. hôn. – ic3