Google Charts API - 列模式和「TimeOfDay」數據類型

我正在使用Google Charts API來創建學生測試性能的圖表。在X軸上，圖表顯示一週中的幾天。在Y軸上，圖表顯示了學生花了多長時間參加考試。（目標是讓教師看看學生是否加快速度）。然而，我有一個問題：Google Charts API - 列模式和「TimeOfDay」數據類型

我的數據是日期格式，我使用Google Charts [HH，MM，SS，MSEC]格式將時間值提供給圖表。當圖表呈現時，Y軸將打印爲「HH：MM：SS」。我真的想定製，因爲秒是非常無用的，它看起來比我想要的更混亂。

Charts API表示您可以爲列指定「模式」，並且指定了「HH：MM」。但是，這似乎並沒有生效。任何人都有經驗格式化在谷歌圖表timeofday並知道如何做到這一點？

來源

2011-12-13 Ben Gotow

我他堅持着同樣的問題。另外，我還想以自定義格式顯示圖例值，但尚未找到方法。 – Gaurav 2012-12-20 06:41:05

該格式深藏在API文檔中。（http://code.google.com/apis/chart/interactive/docs/reference.html）。這是約四分之一的方式向下，它說：

如果列類型是「的TimeOfDay」，該值是四個數字的陣列：[小時，分鐘，秒，毫秒]。

來源

2012-02-08 18:11:38 Distec

OP已經提到他正在將一個數組中的時間值 – Gaurav 2012-12-20 06:42:24

在圖表選項對象，你可以與現場格式設置vAxis對象，並提供你想在這裏使用圖形字符串是一個例子：

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"}} 
);

看那vAxis對象。

對於字符串格式，你應該看看http://userguide.icu-project.org/formatparse/datetime來建立你喜歡的模式。

來源

2013-05-24 18:49:30 dmiranda2791

超過的話可以說：The followingURL是在天Stockprices一個完整的工作版本，並可以在「http://www.harmfrielink.nl/Playgarden/GoogleCharts-Tut-07.html」發現由於完整列表不能發佈正確我只給出了重要的部分：

// 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>

示例將：

使與格式HH格式化hAxis：毫米即18:00下午6:00。
使用日期和時間以及股票價格格式化圖形中的數據（將鼠標懸停在數據圖上）。
給出圖形網格線。

我希望這個例子清楚地說明了如何以正確的方式處理數據。

來源

2014-07-03 14:05:24 Harm

您可以使用hAxis.format或vAxis.format選項。這允許您指定格式字符串，在您使用佔位符信你的TimeOfDay的不同部分

爲了擺脫秒，可以設置y軸的這樣的格式：

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

來源

2017-10-16 15:41:53 Laiacy

Google Charts API - 列模式和「TimeOfDay」數據類型

回答

相關問題