Sử dụng dữ liệu động cho đồ thị

Question

Tôi đang nhắm tới việc tạo một trang web sẽ chứa nhiều dữ liệu do người dùng tạo, hy vọng. Tôi đang học năm đầu lập trình tự học: Python, Django, MySQL, HTML và Javascript.

Tôi có thể lập biểu đồ dữ liệu giả trên một bảng tốt, nhưng bây giờ tôi đang xem xét chuyển dữ liệu đó thành đồ thị trông đầy màu sắc đẹp mắt.

Tôi đang trong ngày đầu tiên điều tra để tìm hiểu cách thực hiện việc này. Nhưng trước khi tôi tiếp tục, tôi muốn hỏi một vài câu hỏi.

Có vẻ như có nhiều khung JavaScript để xây dựng biểu đồ, như biểu đồ Google và biểu đồ jquery và một số chương trình định hướng đối tượng để xây dựng biểu đồ, chẳng hạn như Cairo Plot và matplotlib.

Các khuôn khổ Javascript dường như ban đầu giống như một cách dễ dàng để làm điều đó. Tuy nhiên, trong khi với các bảng, nơi bạn có thể nhập các thẻ dữ liệu biến trong phần thân của một trang HTML, và có Javascript làm cho nó trông đẹp, dữ liệu của đồ thị đi trong vùng kịch bản, nơi các thẻ dữ liệu biến không hoàn toàn có vẻ để làm việc theo cùng một cách. Tôi đang sử dụng Django, do đó, một thẻ biến hình như:

{{ uniquenum }} 

Q1. Nên công việc này và tôi chỉ làm sai, hoặc tôi phải suy nghĩ thẻ biến không thể đi trong khu vực kịch bản?

Q2. Bạn có thể có các khung Javascript tạo ra các biểu đồ từ dữ liệu bên ngoài khu vực <script> không?

Q3. Tôi đã đọc rằng các khung Javascript đang ngày càng trở nên mạnh mẽ hơn, nhưng vì tôi sẽ có khả năng sử dụng một lượng lớn dữ liệu động, tôi nên tập trung vào việc sử dụng các chương trình biểu đồ kiểu OO như Cairo Plot và matplotlib, có cùng mức hỗ trợ?

Chỉ cần tìm kiếm di chuyển đúng hướng.

Answer 1

Các ô (thường) được đặt trên trang web như thế nào?

Đây là giản đồ API thông thường cho thư viện trực quan hóa dữ liệu dựa trên javascript:

i. phân bổ trước div làm vùng chứa biểu đồ trong đánh dấu (hoặc mẫu) của bạn; thường sử dụng một id selector sử dụng một selector id, như vậy:

<div id="chart1"> </div> 

Thông thường các thư viện này cũng yêu cầu chứa này được pre cỡ - phong cách với chiều cao và chiều rộng tính ví dụ,

<div id="chart1" style="height:300px;width:500px; "></div> 

thư viện HTML5 là cụ thể về container -. Tức là, họ yêu cầu biểu đồ để được đặt bên trong vải thẻ, ví dụ,

ii. gọi hàm tạo bản đồ từ tệp javascript được bao gồm của bạn và chuyển vào (i) nguồn dữ liệu; (ii) các tùy chọn thẩm mỹ (ví dụ: nhãn trục) và (iii) vị trí trong đánh dấu của vùng chứa sẽ giữ cốt truyện; vị trí này thường được dự kiến ​​ở dạng bộ chọn id. Vì vậy, trong jqplot ví dụ bên trong sự kiện sẵn sàng jQuery,

plot1 = $.jqplot('chart1', [dataSet1, dataSet2], chartOptions) 

---

javascript dựa trên các thư viện dữ liệu trực quan tôi khuyên (dựa trên đã được sử dụng mỗi cho nhiều dự án).

I. định dạng âm mưu thông thường: thanh, đường, điểm, bánh

Trong javascript âm mưu thư viện, tôi khuyên các tùy chọn jQuery dựa trên bởi vì bạn cần ít mã để tạo yoru lô và bởi vì nó dễ dàng hơn để sử dụng phương pháp AJAX của jQuery để tải dữ liệu của bạn, ví dụ, jqplot, flot, và HighCharts (ba thư viện thứ tại tôi khuyên bạn nên dưới đây) tất cả bao gồm trong phân phối cơ bản của họ, hoàn thành (html, css, js) ví dụ lô mà demonstate tải dữ liệu thông qua AJAX.

• HighCharts (mã nguồn mở nhưng đòi hỏi phải trả tiền bản quyền cho mục đích thương mại, nhưng danh sách tính năng dài nhất đánh bóng nhất và; tín hiệu nhiễu diễn đàn tỷ lệ tích cực và khá cao trên HighCharts Site)

• flot (có lẽ là sử dụng rộng rãi nhất)

• jqplo t (lựa chọn lớn các loại lô, mô đun cao, ví dụ: nhất functinality ngoài những điều cơ bản được thêm một plugin tại một thời điểm)
  
  

II. đồ thị, cây cối, sơ đồ mạng, v.v.

• d3 (sự kế thừa cho protovis; chất lượng đồ họa tuyệt đẹp, các yếu tố tương tác phong phú, hình ảnh động; không đúng jQuery-based, nhưng tác giả đã mượn rõ mô hình cú pháp cơ bản từ jQuery; hướng dẫn tuyệt vời trên d3 bởi một chuyên gia trực quan hóa dữ liệu được thực hiện, Jan Willem Tulp Không giống như những người khác được đề cập ở đây, đây là thư viện cấp thấp, thực sự có ít nhất một số thư viện vẽ sơ đồ dựa trên d3, ví dụ: rickshaw bởi shutterstock và cube by Square. bạn muốn các ô xy/vạch thông thường sau đó cho i nstance, bạn có thể xây dựng các ô của bạn, ví dụ: HighCharts nhanh hơn nhiều. D3 trở nên thú vị hơn như trường hợp sử dụng trở nên cụ thể hơn - đặc biệt là hoạt hình và hình dung không chính thống (sơ đồ sunburst, sơ đồ hợp âm, lô đường song song, bản đồ địa lý, vv)

• RafaelJS, hiển thị trong SVG, cùng với d3 và processing.js, bạn có thể tạo bất kỳ thứ gì (ví dụ: trò chơi hai người chơi trong trình duyệt) với thư viện này; gRafael là một thư viện riêng cho việc tạo các loại cốt truyện thông thường (thanh, đường, bánh)
  
  

III. chuỗi thời gian lô

• dygraphs (một thư viện javascript dedidated Chỉ duy nhất để chuỗi thời gian âm mưu, và bộ tính năng của nó phản ánh sứ mệnh này, ví dụ như, công suất để xử lý và đưa ra lô với số lượng lớn dữ liệu (> 10.000 điểm), hàng loạt các opdtions cho nhãn đánh dấu thời gian trục với nhiều tùy chọn định dạng

• HighStock (một chuỗi thời gian thư viện từ những kẻ HighChart)
  
  

IV. real-time/luồng dữ liệu

• Smoothie Charts (thưa thớt tính năng thiết lập, chỉ nhằm mục đích làm một việc cũng được suôn sẻ làm cho luồng dữ liệu; HighCharts, jqplot, và flot cũng sẽ làm được điều này, nhưng tùy thuộc vào đặc điểm dữ liệu của bạn (phương sai, tỷ lệ) ba thư viện có mục đích chung này có thể không hiển thị dữ liệu là "nhọn", chính xác là những gì Smoothie được thiết kế để loại bỏ)

Answer 2

Nếu bạn định xử lý các tập dữ liệu rất lớn (> 10000 phần tử), có thể bạn sẽ gặp sự cố về hiệu suất, bất kể thư viện Javascript bạn chọn là gì.

Có nói rằng ngày càng có nhiều bộ công cụ Javascript tải dữ liệu động theo yêu cầu HTTP dưới dạng JSON, XML, v.v. flot là nguồn mở và khá nhanh. Highcharts rất giàu tính năng và miễn phí cho các dự án phi thương mại. Và nếu bạn cần thêm hình ảnh bí truyền, bạn phải xem d3.js.

Answer 3

Tôi đã tìm thấy một biểu đồ javascript khác thư viện hữu ích cho stre dữ liệu aming = https://github.com/INRIA/VisualSedimentation. Mã được xếp vào d3.js, nhưng có một số khả năng mở rộng tốt.