Google Charts API - 列パターンと "TimeOfDay"データ型

Google Charts APIを使用して、学生のテスト実施パフォーマンスのグラフを作成しています。 X軸には、曜日が表示されます。 Y軸のグラフは、学生が試験にどのくらいの時間を費やしたかを示しています。（目標は、教師が学生のスピードアップを確認することです）。しかし、私は問題があります：Google Charts API - 列パターンと "TimeOfDay"データ型

私のデータはtimeofday形式であり、私はGoogle Charts [HH、MM、SS、MSEC]形式を使用して期間としてチャートに値を提供しています。チャートがレンダリングされると、Y軸は "HH：MM：SS"と表示されます。私はそれをカスタマイズしたいと思っています。なぜなら、秒はかなり役に立たず、私が望むよりも厄介に見えるからです。

Charts APIは、列に「パターン」を指定でき、「HH：MM」を指定したことを示しています。しかし、それはまったく効果がないようです。誰かがGoogle Chartsでtimeofdayをフォーマットした経験があり、これを行う方法を知っていますか？

出典

2011-12-13 Ben Gotow

私は同じ問題を抱えている。また、凡例の値をカスタム形式で表示したいが、まだ方法が見つかっていない。 – Gaurav

この形式は、APIドキュメントの深い部分に埋め込まれています。（http://code.google.com/apis/chart/interactive/docs/reference.html）。それは仕方ダウン1/4程度で、それは言う：

列タイプが「TIMEOFDAY」の場合、値は4つの数値の配列である：[時間、分、秒、ミリ秒]。チャートではオプションを使用すると、フィールドフォーマットでvAxisオブジェクトを設定し、使用するパターンで文字列を提供することができ、オブジェクトはここでの例です

出典

2012-02-08 18:11:38 Distec

OPはすでに彼が時間値を配列に渡していることを述べています – Gaurav

：で

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

言葉を言うことができるより多く：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>

例は以下となります。午後6時のために夜06時00すなわちミリメートル：

は、フォーマットHHでフォーマットhAxisしてください。
日時と株価でデータをグラフに書式設定します（データプロットの上にカーソルを置きます）。
グラフのグリッド線を指定します。

この例では、正しい方法でデータを処理する方法を明確にしたいと考えています。

出典

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"データ型

答えて

関連する問題