时间戳

首页 > 解决方案 > Google Charts 加载多柱形图时出现问题

javascript - Google Charts 加载多柱形图时出现问题

问题描述

我正在尝试使用谷歌可视化创建一个多柱形图，我为此使用了两个查询，但它不起作用。

我在控制台中收到以下错误：

Error: Row given with size different than 3 (the number of columns in the table).

这是我的查询：

查询1：

 #region Total Hours Per Month sick

        var querythpmsick = (from r in db.SickLeaveRequestForms
                            where r.EmployeeID == id
                            group r by r.MonthOfHoliday into g
                            select new { Value = g.Key, Count1 = g.Sum(h => h.SickLeaveTaken) }
                           ).OrderBy(e => e.Value);


        var resultthpmsick = querythpmsick.ToList();

        var datachartthpmsick = new object[resultthpmsick.Count];
        int Q = 0;
        foreach (var i in resultthpmsick)
        {
            datachartthpmsick[Q] = new object[] { i.Value.ToString(), i.Count1 };
            Q++;
        }
        string datathpmsick = JsonConvert.SerializeObject(datachartthpmsick, Formatting.None);
        ViewBag.datajthpmsick = new HtmlString(datathpmsick);

        #endregion

查询 2：

  #region Total Hours Per Month
        var querythpmpro = (from r in db.HolidayRequestForms
                            where r.EmployeeID == id
                            group r by r.MonthOfHoliday into g
                            select new { Value = g.Key, Count = g.Sum(h => h.HoursTaken) }
                           ).OrderBy(e => e.Value);


        var resultthpmpro = querythpmpro.ToList();

        var datachartthpmpro = new object[resultthpmpro.Count];
        int S = 0;
        foreach (var i in resultthpmpro)
        {
            datachartthpmpro[S] = new object[] { i.Value.ToString(), i.Count };
            S++;
        }
        string datathpmpro = JsonConvert.SerializeObject(datachartthpmpro, Formatting.None);
        ViewBag.datajthpmpro = new HtmlString(datathpmpro);

        #endregion

最后是我的 Javascript：

 <script>
var datathpmpro = '@ViewBag.datajthpmpro';
var datassthpmpro = JSON.parse(datathpmpro);

var datathpmsick = '@ViewBag.datajthpmsick';
var datassthpmsick = JSON.parse(datathpmsick);


 <script type="text/javascript">

// Load the Visualization API and the corechart package.
google.charts.load('current', { 'packages': ['corechart'] });

// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChartA);

// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChartA() {

    // Create the data table.

    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Value');
    data.addColumn('number', 'Count');
    data.addColumn('number', 'Count1');
    data.addRows([[datassthpmpro], [datassthpmsick]]);


    // Set chart options
    var options = {
        'title': 'Holiday Hours Taken Per Month',
        'width': 600,
        'height': 350,
        'hAxis': {title: 'Month Number'},
        'vAxis': {title: 'Holiday Hours Taken'},
        'is3D': true,
        'legend': 'none'
    };

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.ColumnChart(document.getElementById('chartTHPMpro_div'));
    chart.draw(data, options);
}

我想要它，这样我就可以在同一张图表上比较这两个查询。是否有解决此错误的方法？是否必须是两个不同的查询才能工作？

标签： javascriptc#asp.net-mvcgoogle-visualization

解决方案

您的每个查询都有两列，
但谷歌数据表有三列，
所以这不起作用。

您需要创建两个单独的数据表，
然后使用join()方法将它们合并为一个。 

var data1 = new google.visualization.DataTable();
data1.addColumn('string', 'Value');
data1.addColumn('number', 'Count');
data1.addRows([datassthpmpro]);

var data2 = new google.visualization.DataTable();
data2.addColumn('string', 'Value');
data2.addColumn('number', 'Count1');
data2.addRows([datassthpmsick]);

var joinedData = google.visualization.data.join(data1, data2, 'full', [[0, 0]], [1], [1]);

然后使用连接的数据表绘制图表... 

chart.draw(joinedData, options);

推荐阅读