使用谷歌图表尝试设置数据视图.i必须根据列创建数据视图。
目前我有两个函数为4和2创建数据列。如何组合这两个函数以及如何创建动态函数 创建数据视图
var dataView = new google.visualization.DataView(chartData);
setDataViewMultipleChart(dataView);
function setDataViewMultiple(dataView) {
dataView.setColumns([0, 1, {
calc: function(dt, row) {
return getTooltip(dt, row, 1);
},
role: 'tooltip',
type: 'string',
p: {
html: true
}
}, 2, {
calc: function(dt, row, ) {
return getTooltip(dt, row, 2);
},
role: 'tooltip',
type: 'string',
p: {
html: true
}
}, 3, {
calc: function(dt, row) {
return getTooltip(dt, row, 1);
},
role: 'tooltip',
type: 'string',
p: {
html: true
}
}, 4, {
calc: function(dt, row) {
return getTooltip(dt, row, 2);
},
role: 'tooltip',
type: 'string',
p: {
html: true
}
}]);
}
function setDataViewSingleChart(dataView) {
dataView.setColumns([0, 1, {
calc: function(dt, row) {
return getTooltip(dt, row, 1);
},
role: 'tooltip',
type: 'string',
p: {
html: true
}
}, 2, {
calc: function(dt, row, ) {
return getTooltip(dt, row, 2);
},
role: 'tooltip',
type: 'string',
p: {
html: true
}
}]);
}
答案 0 :(得分:1)
只需要构建一个列定义数组
因为计算的列是具有函数(calc
),
的对象
这些需要在闭包(函数)中创建
请参阅以下工作代码段...
将数据表传递给getDataView
函数
这将为数据表中的每一列创建一个视图列
和每个y轴列的工具提示列
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350]
]);
var view = getDataView(data);
var chart = new google.visualization.LineChart(document.querySelector('#chart_div'));
chart.draw(view.toDataTable(), {
tooltip: {
isHtml: true
}
});
function getDataView(dataTable) {
var dataView;
var viewColumns = [];
for (var i = 0; i < dataTable.getNumberOfColumns(); i++) {
addViewColumn(i);
}
function addViewColumn(index) {
viewColumns.push(index);
if (index > 0) {
viewColumns.push({
calc: function (dt, row) {
return getTooltip(dt, row, index);
},
role: 'tooltip',
type: 'string',
p: {
html: true
}
});
}
}
dataView = new google.visualization.DataView(dataTable);
dataView.setColumns(viewColumns);
return dataView;
}
function getTooltip(dt, row, col) {
var tooltip = '<div class="tooltip">';
tooltip += '<div>' + dt.getFormattedValue(row, 0) + '</div>';
tooltip += '<div>' + dt.getColumnLabel(col) + '</div>';
tooltip += '<div>' + dt.getFormattedValue(row, col) + '</div>';
tooltip += '</div>';
return tooltip;
}
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>