[英]Google chart :Create dynamic data view columns
使用谷歌图表正在尝试设置数据视图。我必须基于列创建数据视图。
目前我有两个函数来为 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
}
}]);
}
只需要构建一个列定义数组
由于计算出的列是具有函数( 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.