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



我正在我的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);
}

最新更新