javascript - 无法动态获取谷歌 Material 条形图中的值

Question

嗨，我在这里使用动态数据显示图表，之前我收到了一个错误 **未捕获的类型错误:google.charts.Bar ** 我稍后如何解决它，图表已显示，但它仅显示空值。

下面是我动态获取的 Json 数据

`[ { “地址”:92327.34， “人”:76， “税”:5768.0999999999995， "交易类型": "在线", “交易”:39 }]'

下面是我的js代码

google.charts.load('current', { 'packages': ['bar'] });
google.charts.setOnLoadCallback(barCharttest);

function barCharttest() {
    var sess = dynamic.Session.getInstance().get();
    var ex = document.getElementById("dpdda");
    var clOptions = ex.options[ex.selectedIndex].value;
    var clOptions1 = ex.options[ex.selectedIndex].text;

    var d = new Date();
    d.setDate(d.getDate() - 1);
    var curr_date = d.getDate() - 1;
    var curr_month = d.getMonth() + 1;
    var curr_year = d.getFullYear();


    var dtf = document.getElementById("frm_sale_date").value;
    var dtt = document.getElementById("to_sale_date").value;

    var link2 = "http://xxx.xxx.xxx.xx/xxxxxxx/service1.svc/chart";

    var jsonData = $.ajax({
        type: 'GET',
        url: link2,
        data: "id=" + clOptions + "&cId_=" + sess.Id + "&Name_=" + clOptions1 + "&MachineId_=0&sId_=0&frmDate_=" + dtf + "&toDate_=" + dtt + "",
        dataType: 'json',

    }).done(function (results) {


        var data = new google.visualization.DataTable();
        data.addColumn('string', 'TransactionType');
        data.addColumn('number', 'Transactions');
        data.addColumn('number', 'Tax');
        data.addColumn('number', 'Amt');
        data.addRows(results.length);
        for (i = 0; i < results.length; i++) {
            data.setValue(i, 0, results[i]["TransactionType"]);
            data.setValue(i, 1, parseInt(results[i]["Transactions"]));
            data.setValue(i, 2, parseFloat(results[i]["Tax"]));
            data.setValue(i, 3, parseFloat(results[i]["Amt"]));
        }

        var options = {
            chart: {
                title: 'Company Performance',
                subtitle: 'Sales, Expenses, and Profit: 2014-2017',
            },
            bars: 'horizontal' // Required for Material Bar Charts.
        };

        var chart = new google.charts.Bar(document.getElementById('barchart_material'));


        chart.draw(data, google.charts.Bar.convertOptions(options));



    }
    );

}

下面是我的html代码

    `<input type="date" id="frm_date"/>`

 `<input type="date" id="to_date"/>`
` <input type="button"  value="Click me" onclick="barCharttest()"/>`
`<div id="barchart_material" style="width:100%; height: 220px;overflow:scroll"></div>`

Answer 1

我认为 ajax 调用没有返回任何数据

如果我使用问题中提供的 json 数据，
图表绘制得很好

请参阅以下工作片段...

google.charts.load('current', { 'packages': ['bar'] });
google.charts.setOnLoadCallback(barCharttest);

function barCharttest() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'TransactionType');
  data.addColumn('number', 'Transactions');
  data.addColumn('number', 'Tax');
  data.addColumn('number', 'Amt');

  var results = [ { "Amt": 92327.34, "Persons": 76, "Tax": 5768.0999999999995, "TransactionType": "ONLINE", "Transactions": 39 } ];
  data.addRows(results.length);
  for (i = 0; i < results.length; i++) {
      data.setValue(i, 0, results[i]["TransactionType"]);
      data.setValue(i, 1, parseInt(results[i]["Transactions"]));
      data.setValue(i, 2, parseFloat(results[i]["Tax"]));
      data.setValue(i, 3, parseFloat(results[i]["Amt"]));
  }

  var options = {
      chart: {
          title: 'Company Performance',
          subtitle: 'Sales, Expenses, and Profit: 2014-2017',
      },
      bars: 'horizontal' // Required for Material Bar Charts.
  };

  var chart = new google.charts.Bar(document.getElementById('barchart_material'));
  chart.draw(data, google.charts.Bar.convertOptions(options));
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="barchart_material"></div>

<小时/>

但是，如果我使用空数组绘制图表，
我得到与发布的图像中相同的空结果

请参阅以下工作片段...

google.charts.load('current', { 'packages': ['bar'] });
google.charts.setOnLoadCallback(barCharttest);

function barCharttest() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'TransactionType');
  data.addColumn('number', 'Transactions');
  data.addColumn('number', 'Tax');
  data.addColumn('number', 'Amt');

  var results = [  ];
  data.addRows(results.length);
  for (i = 0; i < results.length; i++) {
      data.setValue(i, 0, results[i]["TransactionType"]);
      data.setValue(i, 1, parseInt(results[i]["Transactions"]));
      data.setValue(i, 2, parseFloat(results[i]["Tax"]));
      data.setValue(i, 3, parseFloat(results[i]["Amt"]));
  }

  var options = {
      chart: {
          title: 'Company Performance',
          subtitle: 'Sales, Expenses, and Profit: 2014-2017',
      },
      bars: 'horizontal' // Required for Material Bar Charts.
  };

  var chart = new google.charts.Bar(document.getElementById('barchart_material'));
  chart.draw(data, google.charts.Bar.convertOptions(options));
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="barchart_material"></div>

<小时/>

检查提供数据的服务中使用的日期子句

如果您使用从/到日期作为实际日期值，
并且两个参数使用相同的日期，
需要调整时间部分以包含至少 24 小时

意味着开始日期的时间应该为零，
至日期应为23:59:59

例如，调整参数以包括时间...

来自:2017-05-29 00:00:00
至:2017-05-29 23:59:59