【问题标题】:Data Bind to Pie Chart (Google API)数据绑定到饼图 (Google API)
【发布时间】:2017-03-04 11:11:20
【问题描述】:

我正在尝试将数据动态绑定到饼图,但它不起作用。这是我的代码:

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

【问题讨论】:

  • 你是这个意思吗? tiikoni.com/tis/view/?id=6db3038
  • 是的,谢谢 -- 上面的第一个 sn-p 看起来不错,除了将 'int' 更改为 'number' --> data.addColumn('number', 'share');
  • 我在从函数传递“dataTable”时使用了“number”,但我错了,因为只能传递 json 对象。它没有成功(jsonData)。我没有传递 Json 对象,而是将列类型更改为“int”。但多亏了你,现在它可以工作了。

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


【解决方案1】:

使用上面的第一个sn-p...

'int' 更改为'number'...

data.addColumn('number', 'share');

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2011-08-30
    • 1970-01-01
    • 2021-06-26
    • 2014-02-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多