我想不使用google visualization api在折线图的工具提示中显示x轴值。有谁知道这是怎么做到的吗?我想在下面的代码中的系列1和2有一个工具提示,只显示垂直轴值(测试)
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date Logged');
data.addColumn('number', 'Test');
data.addColumn('string', 'State');
data.addColumn('number', null);
data.addColumn('number', null);
for (var i = 0; i < dataValues.length; i++) {
data.addRow(//getting this from db);
}
var monthformatter = new google.visualization.DateFormat({pattern: "MMM d, y"});
monthformatter.format(data, 0);
// Define a category picker control
var categoryPicker2 = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control2',
'options': {
'filterColumnLabel': 'State',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false,
'caption' : 'All'
}
}
});
chart = new google.visualization.ChartWrapper({
'chartType': 'ScatterChart',
'containerId': 'chart1',
'options': {
'title': 'Test',
'width': 500,
'height': 500,
'legend': 'none',
'pointSize': 5,
'vAxis': { 'title': 'Test', 'titleTextStyle': { 'color': 'red'}},
'hAxis': { 'format': 'MMM d, y', 'title': 'Date', 'titleTextStyle': { 'color': 'red'} },
'interpolateNulls': true,
'pieSliceText': 'label',
'series': {
'0': { 'color': 'blue' },
'1': { 'color': 'red', 'lineWidth': 3, 'pointSize': 0, 'visibleInLegend': 'false' },
'2': { 'color': 'red', 'lineWidth': 3, 'pointSize': 0, 'visibleInLegend': 'false'},
}
},
'view': {'columns': [0, 1, 3, 4]}
});
// Create a dashboard
new google.visualization.Dashboard(document.getElementById('dashboard')).
bind([categoryPicker2], [chart]).
// Draw the entire dashboard.
draw(data);
答案 0 :(得分:1)
您可以将这些列的格式化值设置为&#34;测试&#34;中的值,也可以将自定义工具提示列添加到视图中。
将第3列和第4列的格式化值设置为第1列的值
view: {
columns: [0, 1, {
sourceColumn: 3,
calc: function (dt, row) {
return {v: dt.getValue(row, 3), f: dt.getFormattedValue(row, 1)};
}
}, {
sourceColumn: 4,
calc: function (dt, row) {
return {v: dt.getValue(row, 4), f: dt.getFormattedValue(row, 1)};
}
}]
}
创建自定义工具提示列:
view: {
columns: [0, 1, 3, {
type: 'string',
role: 'tooltip',
calc: function (dt, row) {
// return to whatever text you want in the tooltip
return dt.getFormattedValue(row, 1);
}
}, 4, {
type: 'string',
role: 'tooltip',
calc: function (dt, row) {
// return to whatever text you want in the tooltip
return dt.getFormattedValue(row, 1);
}
}]
}