谷歌折线图 - 来自CSV的多系列工具提示

Question

我是javascript的新手，所以如果我只是忽略了一些非常基本的东西，我提前道歉！

我正在使用Google图表创建多系列折线图，该折线图是从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

Answer 1

与其创建自定义工具提示，
不如尝试以下配置选项。

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 Totaln2018-10-22 16:10:01,3.37,38.04,149.33,187.37n2018-10-22 16:20:01,3.8,37.82,6.87,44.69n2018-10-22 16:30:01,3.28,38.47,7.04,45.51n2018-10-22 16:40:01,3.35,40.04,7.19,47.23n2018-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>