Google图表（柱形图）中基于从服务器获取的数据的其他水平X轴

Question

我正在我的aspx代码中检索各种类型的数据（日期时间，字符串，整数），以便从服务器端使用此代码填充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（多个）值，我还必须根据日期时间和字符串值过滤图表值。 有什么方法可以实现？

Answer 1

图表期望x轴仅在第一列中

我们可以使用DataView将前两列合并为一个

然后使用DataView绘制图表，请参见以下代码段...

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);
}