基於從服務器獲取的數據的谷歌圖表（列圖表）中的附加水平X軸

我在我的aspx代碼中檢索各種類型的數據（日期時間，字符串，整數），用於從服務器端使用此代碼填充Google圖表基於從服務器獲取的數據的谷歌圖表（列圖表）中的附加水平X軸

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（多）的柱形圖值datetime和字符串值，我也有基於datetime和字符串值過濾圖表值。有什麼方法可以實現它嗎？

來源

2017-04-13 Jaideep

@WhiteHat你對此有何想法？ – Jaideep

谷歌提供了5種不同的過濾數據控件，包括'DateRangeFilter'和'StringFilter'，所有這些控件都可以綁定到單個/多個圖表，參見 - > [Controls and Dashboards]（https://developers.google。 com/chart/interactive/docs/gallery/controls） - 關於在X軸上獲取_datetime和字符串值，需要更多信息，數據表的第一列驅動X軸 - 請分享樣本'data.d'和你想要如何顯示x軸標籤的例子，像這樣？ - >'2017-04-13 07:24 am' – WhiteHat

@WhiteHat其實我正在使用的表有30+列，我正在使用5（String，datetime，datetime，int，int，int）for填充圖表。我想要X軸上的第一列和第二列，最後三列繪製柱形圖。所以我希望我的X軸標籤顯示爲 - >「John 13 April 2017」（用戶名和日期）。有多個用戶，繪製圖表後，我需要使用下拉菜單選擇用戶和日期，這些下拉菜單將動態過濾數據。希望你能夠理解，如果不是我可以再解釋。 – Jaideep

圖表期望的x軸是在第一列僅

我們可以使用一個數據視圖的前兩列組合成一個

然後使用數據視圖繪製圖表，參見以下snippet ...

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

來源

2017-04-13 11:52:21 WhiteHat

因此，現在我將首先使用前兩列過濾數據，然後將它們結合起來並顯示數據。尤里卡。當我執行代碼時，我會標記你。謝謝@WhiteHat – Jaideep

基於從服務器獲取的數據的谷歌圖表（列圖表）中的附加水平X軸

回答

相關問題