API biểu đồ của Google - Mẫu cột và kiểu dữ liệu "TimeOfDay"

Question

Tôi đang làm việc với API Google Charts để tạo biểu đồ về hiệu suất kiểm tra của học sinh. Trên trục X, biểu đồ hiển thị các ngày trong tuần. Trên trục Y, biểu đồ hiển thị thời gian học sinh đã thực hiện bài kiểm tra. (Mục đích là dành cho giáo viên để xem liệu học sinh có tăng tốc hay không). Tuy nhiên, tôi gặp sự cố:

Dữ liệu của tôi ở định dạng ngày giờ và tôi đang cung cấp các giá trị cho biểu đồ dưới dạng thời lượng bằng Biểu đồ Google [HH, MM, SS, MSEC]. Khi biểu đồ hiển thị, trục Y được in dưới dạng "HH: MM: SS". Tôi thực sự muốn tùy chỉnh điều đó bởi vì giây là khá vô dụng và nó trông rối rắm hơn tôi muốn.

API biểu đồ cho biết bạn có thể chỉ định "mẫu" cho cột và tôi đã chỉ định "HH: MM". Tuy nhiên, điều đó dường như không có hiệu lực gì cả. Bất kỳ ai có định dạng ngày giờ định dạng trong Biểu đồ của Google và biết cách thực hiện việc này?

Answer 1

Định dạng được chôn sâu trong tài liệu API. (http://code.google.com/apis/chart/interactive/docs/reference.html). Đó là khoảng một phần tư xuống, nó nói:

Nếu loại cột là 'timeofday', giá trị là một mảng bốn số : [giờ, phút, giây, mili giây].

Answer 2

Trong bảng xếp hạng các tùy chọn đối tượng bạn có thể thiết lập các vAxis đối tượng với lĩnh vực định dạng và cung cấp một chuỗi với mô hình bạn muốn sử dụng ở đây là ví dụ:

new google.visualization.BarChart(document.getElementById('visualization')); 
    draw(data, 
     {title:"Yearly Coffee Consumption by Country", 
     width:600, height:400, 
     vAxis: {title: "Year", format: "yy"}, 
     hAxis: {title: "Cups"}} 
); 

Nhìn vào đối tượng vAxis.

Đối với định dạng chuỗi, bạn nên xem http://userguide.icu-project.org/formatparse/datetime để xây dựng mẫu bạn thích.

Answer 3

Hơn lời có thể nói: Các followingURL là một phiên bản làm việc đầy đủ cho Stockprices trong ngày, và có thể được tìm thấy tại 'http://www.harmfrielink.nl/Playgarden/GoogleCharts-Tut-07.html' Từ một danh sách đầy đủ không thể được đăng tải một cách chính xác tôi chỉ cung cấp cho các bộ phận quan trọng:

// Load the Visualization API and the piechart package. 
google.load('visualization', '1.0', {'packages':['corechart']}); 

// Set a callback to run when the Google Visualization API is loaded. 
google.setOnLoadCallback(drawChart); 

// Callback that creates and populates a data table, 
// instantiates the pie chart, passes in the data and 
// draws it. 
function drawChart() { 
    // Create the data table. 
    var dataTable = new google.visualization.DataTable(); 
    dataTable.addColumn('datetime', 'Time'); 
    dataTable.addColumn('number', 'Price (Euro)'); 
    dataTable.addRows([ 
     [new Date(2014, 6, 2, 9, 0, 0, 0), 21.40], 
     [new Date(2014, 6, 2, 11, 0, 0, 0), 21.39], 
     [new Date(2014, 6, 2, 13, 0, 0, 0), 21.20], 
     [new Date(2014, 6, 2, 15, 0, 0, 0), 21.22], 
     [new Date(2014, 6, 2, 17, 0, 0, 0), 20.99], 
     [new Date(2014, 6, 2, 17, 30, 0, 0), 21.03], 
     [new Date(2014, 6, 3, 9, 0, 0, 0), 21.05], 
     [new Date(2014, 6, 3, 11, 0, 0, 0), 21.07], 
     [new Date(2014, 6, 3, 13, 0, 0, 0), 21.10], 
     [new Date(2014, 6, 3, 15, 0, 0, 0), 21.08], 
     [new Date(2014, 6, 3, 17, 0, 0, 0), 21.05], 
     [new Date(2014, 6, 3, 17, 30, 0, 0), 21.00], 
     [new Date(2014, 6, 4, 9, 0, 0, 0), 21.15], 
     [new Date(2014, 6, 4, 11, 0, 0, 0), 21.17], 
     [new Date(2014, 6, 4, 13, 0, 0, 0), 21.25], 
     [new Date(2014, 6, 4, 15, 0, 0, 0), 21.32], 
     [new Date(2014, 6, 4, 17, 0, 0, 0), 21.35], 
     [new Date(2014, 6, 4, 17, 30, 0, 0), 21.37], 
    ]); 

    // Instantiate and draw our chart, passing in some options. 
    // var chart = new google.visualization.PieChart(document.getElementById('chart_div')); 
    var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 

    var options = { 
     title : 'AEX Stock: Nationale Nederlanden (NN)', 
     width : 1400, 
     height : 540, 
     legend : 'true', 
     pointSize: 5, 
     vAxis: { title: 'Price (Euro)', maxValue: 21.50, minValue: 20.50 }, 
     hAxis: { title: 'Time of day (Hours:Minutes)', format: 'HH:mm', gridlines: {count:9} } 
    }; 

    var formatNumber = new google.visualization.NumberFormat(
     {prefix: '', negativeColor: 'red', negativeParens: true}); 

    var formatDate = new google.visualization.DateFormat(
     { prefix: 'Time: ', pattern: "dd MMM HH:mm", }); 

    formatDate.format(dataTable, 0); 
    formatNumber.format(dataTable, 1); 

    chart.draw(dataTable, options); 
    } // drawChart 

</script> 
</head> 
<body> 
    <!--Div that will hold the pie chart--> 
    <div id="chart_div" style="width:400; height:300"></div> 
</body> 

Ví dụ sẽ:

• Thực hiện một hAxis định dạng với định dạng HH: mm tức là 18:00 cho 18:00.
• Định dạng dữ liệu trong biểu đồ (di chuột qua ô dữ liệu) theo ngày và giờ và giá cổ phiếu.
• Cung cấp đường lưới đồ thị.

Tôi hy vọng ví dụ này làm rõ cách xử lý dữ liệu theo cách chính xác.

Answer 4

Bạn có thể sử dụng tùy chọn hAxis.format hoặc vAxis.format. Điều này cho phép bạn chỉ định một chuỗi định dạng, nơi bạn sử dụng chữ giữ chỗ cho các bộ phận khác nhau của timeofday bạn

Để thoát khỏi những giây, bạn có thể thiết lập các định dạng của Y Axis như thế này:

var options = { 
    vAxis: { format: 'hh:mm' } 
    };