Я новичок в javascript, поэтому заранее прошу прощения, если я просто упускаю из виду что-то очень простое!
Я использую Google Charts для создания линейки нескольких линий, которые я рисую из файла csv. Он работает хорошо, но всплывающая подсказка пока только показывает ось x и одно значение y.
Я прочитал документацию и увидел примеры именно того, что мне нужно, однако роль столбца задается после добавления данных столбца с помощью addColumn, а не из файла csv.
Это мое первое сообщение, поэтому, пожалуйста, дайте мне знать, если вам нужна дополнительная информация!
Вот мой текущий код, который работает для отображения линейки нескольких серий:
function NewChart() {
$.get("test.csv", function(csvString) {
// transform the CSV string into a 2-dimensional array
var arrayData = $.csv.toArrays(csvString, {onParseValue:
$.csv.hooks.castToScalar});
// this new DataTable object holds all the data
var data = new google.visualization.arrayToDataTable(arrayData);
var view = new google.visualization.DataView(data);
view.setColumns([
{
sourceColumn: 0,
type: 'datetime',
calc: function(table, row) {
var value = table.getValue(row, 0);
return moment(value).toDate();
}
},2,3,4
]);
var newChart1 = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'chartContainer1',
dataTable: view,
options:{
title: 'New Chart',
explorer: {
actions: ["dragToZoom", "rightClickToReset"],
maxZoomIn: 0.2,
maxZoomOut: 1.0,
zoomDelta: 10,
axis: "horizontal",
keepInBounds: true
},
titleTextStyle : {color: 'grey', fontSize: 20},
legend: { position: 'bottom'},
hAxis: {
format: 'yyyy-MM-d',
gridlines: {count: 3},
slantedTextAngle: 85
},
vAxis: {
title: 'Utilization %',
minValue: 0,
maxValue: 100,
},
chartArea: {
left: 50,
right: 15,
width: '100%'
},
animation: {
duration: 2000,
easing: 'out',
startup: true
},
}
});
newChart1.draw();
});
}
Вот пример моего файла csv:
Date,CPU Utilization,NETWORK(rxkB/s),NETWORK(txkB/s),NETWORK Total
2018-10-22 16:10:01,3.37,38.04,149.33,187.37
2018-10-22 16:20:01,3.8,37.82,6.87,44.69
2018-10-22 16:30:01,3.28,38.47,7.04,45.51
2018-10-22 16:40:01,3.35,40.04,7.19,47.23
2018-10-22 16:50:01,3.46,39.55,7.11,46.66
вместо создания пользовательской подсказки,
попробуйте следующий вариант конфигурации.
focusTarget: 'category'
когда установлено, всплывающая подсказка отображает значения из всех серий для строки.
Это полезно для сравнения значений разных серий.
см. следующий рабочий фрагмент...
google.charts.load('current', {
packages:['controls', 'corechart']
}).then(function () {
//$.get("test.csv", function(csvString) {
// transform the CSV string into a 2-dimensional array
var csvString = 'Date,CPU Utilization,NETWORK(rxkB/s),NETWORK(txkB/s),NETWORK Total\n2018-10-22 16:10:01,3.37,38.04,149.33,187.37\n2018-10-22 16:20:01,3.8,37.82,6.87,44.69\n2018-10-22 16:30:01,3.28,38.47,7.04,45.51\n2018-10-22 16:40:01,3.35,40.04,7.19,47.23\n2018-10-22 16:50:01,3.46,39.55,7.11,46.66';
var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
// this new DataTable object holds all the data
var data = google.visualization.arrayToDataTable(arrayData);
var view = new google.visualization.DataView(data);
view.setColumns([{
sourceColumn: 0,
type: 'datetime',
calc: function(table, row) {
var value = table.getValue(row, 0);
//return moment(value).toDate();
return new Date(value);
}
}, 2, 3, 4]);
var newChart1 = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'chartContainer1',
dataTable: view.toDataTable(),
options: {
focusTarget: 'category',
title: 'New Chart',
explorer: {
actions: ['dragToZoom', 'rightClickToReset'],
maxZoomIn: 0.2,
maxZoomOut: 1.0,
zoomDelta: 10,
axis: 'horizontal',
keepInBounds: true
},
titleTextStyle: {color: 'grey', fontSize: 20},
legend: {position: 'bottom'},
hAxis: {
format: 'yyyy-MM-d',
gridlines: {count: 3},
slantedTextAngle: 85
},
vAxis: {
title: 'Utilization %',
minValue: 0,
maxValue: 100,
},
chartArea: {
left: 50,
right: 15,
width: '100%'
},
animation: {
duration: 2000,
easing: 'out',
startup: true
},
}
});
newChart1.draw();
//});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/0.71/jquery.csv-0.71.min.js"></script>
<div id="chartContainer1"></div>