Question

在这里，我正在使用动态数据显示图表，之前我收到了错误**未捕获TypeError：google.charts.Bar **一些我如何解决它后来显示图表但它只显示空值。

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

`[ { “Amt”：92327.34， “人”：76， “税”：5768.0999999999995， “TransactionType”：“在线”， “交易”：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>

检查提供数据的服务中使用的日期条款

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

意味着来自日期的时间应为零，
并且到日期应该有23:59:59

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

来自：2017-05-29 00:00:00
致：2017-05-29 23:59:59

无法在Google物料条形图中动态获取值

1 个答案: