Tôi sẽ làm cách nào để tạo một loại biểu đồ vùng xếp chồng? [jQuery, Google Charts, vv]

Tôi có một số dữ liệu mà tôi cần để tạo biểu đồ. Vấn đề là dữ liệu có phạm vi giá. Một số trong những giá này có một số chồng chéo giữa chúng. Ngoài ra, tất cả các phạm vi giá đều có giới hạn trên và dưới không phải là giá trị bằng 0.Tôi sẽ làm cách nào để tạo một loại biểu đồ vùng xếp chồng? [jQuery, Google Charts, vv]

Đây là một hình ảnh để loại giải thích những gì nó là tôi tìm cách để thực hiện: enter image description here

Tôi đã cố gắng để tìm một Chart jQuery hoặc Google Chart phù hợp với nhu cầu của tôi, nhưng đã vậy, đến nay không thể làm như vậy. Có một số thứ gần với những gì tôi đang tìm kiếm, ví dụ như các biểu đồ bước, nhưng tất cả chúng đều có các yêu cầu như "không có giá trị trùng lặp" hoặc "bắt đầu từ số không". Tôi cũng đang nghĩ đến việc sử dụng biểu đồ hình nến, nhưng bạn thực sự không thể phân biệt các khu vực chồng chéo, điều quan trọng đối với tập dữ liệu của tôi.

Đây có phải là thứ có sẵn không? Tôi chỉ tìm kiếm ở những nơi sai? Cảm ơn trước sự giúp đỡ của bạn.

Nguồn

2012-06-11 Jim P

Có vẻ như bạn đang muốn làm điều gì đó tương tự như hình dung dữ liệu chuỗi thời tiết, đó là những gì tôi đã cố gắng tìm ra cách để làm vài giờ qua.

Không thể nói tôi thực sự biết cách làm những gì bạn muốn với Biểu đồ của Google, nhưng thư viện ở số http://dygraphs.com/ trông thực sự rất gợi cảm.

Từ trang web:

Stacked line graph.

Nguồn

2012-06-24 22:11:07 aendrew

Tôi có khá nhiều expierence với những loại đồ thị. Xem ví dụ phức tạp my site. Một giải pháp đơn giản có thể được mã hóa như sau:

<html> 
    <head> 
    <script type="text/javascript" src="http://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 
     google.load('visualization', '1', {packages: ['corechart']}); 
    </script> 
    <script type="text/javascript"> 
     function drawVisualization() { 
     // Fill data object, first row contains legend text, which in 
     // this example contains the calculation rules. 
     var data = google.visualization.arrayToDataTable([ 
      ['Month', 'min(Dataset1)', 'max(Dataset1)-min(Dataset1)', 
      'min(Dataset2)-max(Dataset1)', 'max(Dataset2)-min(Dataset2)', 
      'min(Dataset3)-max(Dataset2)', 'max(Dataset3)-min(Dataset3)'], 
      ['2004/05', 1, 2, 2, 2, 5,4], 
      ['2005/06', 2, 3, 1, 1, 3,3], 
      ['2006/07', 3, 4, 0, 2, 0,2], 
      ['2007/08', 3, 4, -1, 2, -5,2], 
      ['2008/09', 4, 4, -2, 3, -9,1] 
     ]); 

     // Create and draw the visualization. 
     var ac = new google.visualization.AreaChart(
     document.getElementById('visualization')); 
     ac.draw(data, { 
      isStacked: true, 
      chartArea:{left:"5%",top:"2%",width:"50%",height:"93%"}, 
      series: { 
      0:{color: 'transparent'}, 
      2:{color: 'transparent'}, 
      4:{color: 'transparent'}, 
      } 
     }); 
     } 
     google.setOnLoadCallback(drawVisualization); 
    </script> 
    </head> 
    <body> 
    <div id="visualization" style="width: 600px; height: 400px;"></div> 
    </body> 
</html>

Điều chúng tôi làm trong mã ở trên là trùng lặp số chuỗi. Mỗi chuỗi sẽ được bắt đầu bằng một lớp chuỗi trong suốt có chiều cao khoảng cách đến chuỗi trước đó.

Một ảnh chụp màn hình của giải pháp đơn giản: A screenshot of the simplified solution (code shown above)

Một ảnh chụp màn hình của giải pháp phức tạp: A screenshot of the complex solution implemented on my site allepeilingen.com

Nguồn

2012-10-29 12:00:29 Ruut

Tôi sẽ làm cách nào để tạo một loại biểu đồ vùng xếp chồng? [jQuery, Google Charts, vv]

Trả lời

Các vấn đề liên quan