我正在我的aspx代码中检索各种类型的数据(日期时间,字符串,int(,以便使用此代码从服务器端填充Google图表
var chartData;
$.ajax({
url: "Default2.aspx/GetChartData",
data: "",
dataType: "json",
type: "POST",
contentType: "application/json; chartset=utf-8",
success: function (data) {
chartData = data.d;
},
error: function () {
alert("Error loading data! Please try again.");
}
}).done(function () {
google.charts.setOnLoadCallback(drawChart);
});
});
function drawChart() {
var data = google.visualization.arrayToDataTable(chartData);
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data);
}
现在我想在 X 轴上显示日期时间和字符串值,在柱形图中显示 int(多个(值,我还必须根据日期时间和字符串值过滤图表值。有什么方法可以实现它吗?
图表预计 x 轴仅在第一列中
我们可以使用数据视图将前两列合并为一列
然后使用数据视图绘制图表,请参阅以下代码片段...
function drawChart() {
var data = google.visualization.arrayToDataTable(chartData);
// use view to combine first two columns
var view = new google.visualization.DataView(data);
var viewColumns = [{
calc: function (dt, row) {
return dt.getValue(row, 0) + ' ' + dt.getValue(row, 1);
},
label: 'x-axis',
type: 'string'
}];
// add remaining columns to view
$.each(new Array(data.getNumberOfColumns()), function (colIndex) {
// skip first two columns
if (colIndex < 2) {
return;
}
viewColumns.push(colIndex);
});
// set view columns
view.setColumns(viewColumns);
// use view to draw chart
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(view);
}