以下のコードは、CSVファイルからDataViewを読み込む必要があります。 DataViewはLineCartとChartRangeFilterを束ねたDashBoardに送られます。私の問題は、ChartRangeFilterが適切なグラフのプレビューを表示し、範囲を選択できるようにする一方、LineChartは空のデータセットのみを表示しますが、正しいデータ型と軸ラベルを表示することです。私の前提は、ChartRangeFilterがそれを表示できるので、DataViewのコンテンツはOKです。 LineChartはなぜ同じことをすることができないのですか?Google Visualizationを使用すると、DataViewのコンテンツはChartRangeFilterに表示されますが、関連するLineChartに表示されないのはなぜですか?
ありがとう:
google.load('visualization', '1', {packages: ['controls', 'charteditor']});
google.setOnLoadCallback(drawChart);
function drawChart() {
// Create CSV string
csvString = 'TIME,TEMP0,HUM0\n13:00:04,24.7,50\n13:01:05,26.7,60\n13:02:04,22.7,52\n13:03:05,14.7,40\n13:04:04,34.7,80\n13:05:05,24.7,50';
// Parse string into an Array
var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
// Convert Array into a DataTable
var data = new google.visualization.arrayToDataTable(arrayData);
// Create DataView from DataTable
var view = new google.visualization.DataView(data);
// Convert string times in first column to timeofday (thanks to WhiteHat!)
var columns = [];
for (var i = 0; i < data.getNumberOfColumns(); i++) {
columns.push(i);
}
columns[0] = {
calc: function(dt, row) {
var thisDate = new Date('1/1/2016 ' + dt.getValue(row, 0));
return [thisDate.getHours(), thisDate.getMinutes(), thisDate.getSeconds(), thisDate.getMilliseconds()];
},
label: arrayData[0][0],
type: 'timeofday'
};
// Determine which columns should be visible
view.setColumns(columns);
// Create Dashboard
var dash = new google.visualization.Dashboard(document.getElementById('dashboard'));
// Range filter control wrapper
var control = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'control_div',
options: {
filterColumnIndex: 0,
ui: {
chartOptions: {
height: 50,
width: 1000,
},
chartView: {
columns: [0, 1,2]
}
}
}
});
// Line chart wrapper
var chart = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'chart_div',
dataTable: view,
options:{
title: 'Home Automation - Environment Sensor Log',
width: 1000,
height: 400
}
});
// Bind control and chart in Dashboard
dash.bind([control], [chart]);
// Draw dashboard using Dataview as source
dash.draw(view);
}
これは、現在の最終結果です!
遅れて申し訳ありません!はい、それは動作しますが、CSVファイルからインポートされた実際のデータセットを使用すると、はるかに大きい(1400行×30列)場合は再描画するのが非常に遅くなります。私は何が原因であるか見るためにいくつかのテストを行う必要があります。私は、範囲フィルタトラックバーを移動するたびに、vAxis.viewWindowを設定するgetColumnRangeまたは多数のチックを再描画すると思われます。 また、以前に行ったように、 'view.setColumns([0,1,5,9,13,17,21,25,29]); 'を使って見たいカラムを設定することができなくなりました。私は "フィルタは、文字列の列を操作することはできません"というエラーメッセージを再度表示します... – tohox
私は、上記の答えが「0」の代わりに計算された列を使用していると思っています - 遅いクライアント側の処理の性質上、より多くのデータがより多くの時間を必要とします。 – WhiteHat
'vAxis'' viewWindow'サイズ変更とそれに関連する' view.getColumnRange'を削除することで事態を大幅に加速することができました。私はまた、密度が高すぎて残りのすべてをマスキングするので、線図のポイントを取り除きました。今では、元のCSVデータセットからどの列を見たいかを選択する方法が必要です。ホワイトハットありがとう! – tohox