数据绑定到饼图(Google API)

时间:2017-03-04 11:11:20

标签: jquery asp.net json google-visualization google-pie-chart

我正在尝试将数据动态绑定到饼图,但它无法正常工作。这是我的代码:

function drawChart() {
      $.ajax({
          url: "list",
          dataType: "json",
          success: function (jsonData) {
              var data = new google.visualization.DataTable();
              data.addColumn('string', 'cName');
              data.addColumn('int', 'share');

              for (var i = 0; i < jsonData.length; i++) {
                  data.addRow([jsonData[i].cName, jsonData[i].share]);
              }

              var options = {
                  title: 'Certificate details',
                  backgroundColor: '#e9e9e9'
              };
              var chart = new google.visualization.PieChart(document.getElementById('piechart'));
              chart.draw(data, options);
          }
      });}

功能:

public JsonResult list()
    {
        int regId = getUserId(Session["username"].ToString());
        var result = (from e in db.share_bought_history
                      where e.regist_id == regId
                      group e by e.comapnay_id into companies
                      select new
                      {
                          cName = companies.FirstOrDefault().company.company_name,
                          share = companies.Sum(x => x.no_of_sahre)
                      });
        return Json(result.ToList(), JsonRequestBehavior.AllowGet);
    }

我也尝试传递直接DataTable但同样的问题(没有显示) 这是代码:

function drawChart() {
      $.ajax({
          url: "list",
          dataType: "json",
          success: function (jsonData) {
              var options = {
                  title: 'Certificate details',
                  backgroundColor: '#e9e9e9'
              };
              var chart = new google.visualization.PieChart(document.getElementById('piechart'));
              chart.draw(jsonData, options);
          }
      });

功能:

public JsonResult list()
    {
        DataTable dataTable = new DataTable("pie");
        dataTable.Columns.Add("cName", typeof(System.String));
        dataTable.Columns.Add("share", typeof(System.Int16));
        int regId = getUserId(Session["username"].ToString());
        var result = (from e in db.share_bought_history
                      where e.regist_id == regId
                      group e by e.comapnay_id into companies
                      select new
                      {
                          cName = companies.FirstOrDefault().company.company_name,
                          share = companies.Sum(x => x.no_of_sahre)
                      });
        foreach (var item in result)
        {
            DataRow row = dataTable.NewRow();
            row[0] = item.cName;
            row[1] = item.share;
            dataTable.Rows.Add(row);
        }
        return Json(dataTable, JsonRequestBehavior.AllowGet);
    }

并且不了解问题是什么,因为当我手动传递数据(静态)时,饼图显示完美。 像:

function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Task', 'Hours per Day'],
      ['Work',     11],
      ['Eat',      2],
      ['Commute',  2],
      ['Watch TV', 2],
      ['Sleep',    7]
      ]);

    var options = {
        title: 'My Daily Activities',
        backgroundColor: '#e9e9e9'
    };
      var chart = new google.visualization.PieChart(document.getElementById('piechart'));

    chart.draw(data, options);
  }

1 个答案:

答案 0 :(得分:1)

使用上面的第一个代码段...

lines.insert(pos, sk + '\n')更改为f.write(line) ...

'int'