Question

第三天我试图从谷歌时间线图表中获取json的数据而没有错误。我认为它应该有效，但我有一个错误<g><text text-anchor="middle" x="NaN" y="21.05" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#000000"> </text></g>

部分var data = []; $.ajax({ url: "/api/reports/6/linestatus", dataType: "json", success: function (jsonData) { for (var i = 0; i < jsonData.length; i++) { startTime = new Date(jsonData[i].dateStart); startHours = startTime.getHours(); startMinutes = startTime.getMinutes(); startSeconds = startTime.getSeconds(); endTime = new Date(jsonData[i].dateEnd); endHours = endTime.getHours(); endMinutes = endTime.getMinutes(); endSeconds = endTime.getSeconds(); console.log(data); data.push( [jsonData[i].lineName.toString(), jsonData[i].status.toString(), new Date(0, 0, 0, startHours, startMinutes, startSeconds), new Date(0, 0, 0, endHours, endMinutes, endSeconds)] ); } } }) dataTable.addRows(data);

存在问题

我的图表中有ajax调用数据：

[{
  "lineId": 6,
  "lineName": "Line 1",
  "status": 2,
  "dateStart": "2017-08-03T15:10:20.42",
  "dateEnd": "2017-08-03T15:10:23.353"
}]

我的JSON数据：

attachment : form_data,

很抱歉代码太多了。 = \ 谢谢。

Answer 1

主要问题是内循环。

$.ajax({
          url: "url",
          dataType: "json",
          success: function (jsonData) {
              for (var i = 0; i < jsonData.length; i++) {
                  data.push(
                       [['text', 'text', new Date(), new Date()]]
                  );
              }
          }
      })

如果在循环中使用data.push（）或addRows（），它就不起作用。但是如果我把静态数据放在循环之外，那就可以了。

Answer 2

评论中的小提琴中的两件事

（1）循环中的语法无效
数组没有做任何事情

for (var i = 0; i < 2; i++){
  [ 'Washington', new Date(), new Date() ],  // <-- ??
}

需要使用addRow或其他内容

for (var i = 0; i < 2; i++){
  dataTable.addRow([ 'Washington', new Date(), new Date() ]);
}

（2）它可能是一个错误，但如果所有行都有相同的开始和结束日期，则图表会抛出错误

  // dates have close if not equal times
  dataTable.addRow([ 'Washington', new Date(), new Date() ]);

请参阅以下工作片段，
已添加addRow并修改了开始日期...

＆＃13;

google.charts.load('current', {
  callback: drawChart,
  packages: ['timeline']
});

function drawChart() {
  var container = document.getElementById('timeline');
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();

  dataTable.addColumn({ type: 'string', id: 'President' });
  dataTable.addColumn({ type: 'date', id: 'Start' });
  dataTable.addColumn({ type: 'date', id: 'End' });

  for (var i = 0; i < 2; i++) {
    dataTable.addRow([
      'row ' + (i + 1),
      new Date((new Date()).getTime() - ((i + 1) * 24 * 60 * 60 * 1000)),
      new Date()
    ]);
  }

  chart.draw(dataTable);
}

＆＃13;

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="timeline" style="height: 180px;"></div>

＆＃13;

修改
这是一个使用类似数据的工作示例...

＆＃13;
＆＃13;
google.charts.load('current', { callback: drawChart, packages: ['timeline'] }); function drawChart() { var jsonData = [{ "lineId": 1, "lineName": "Line 1", "status": 1, "dateStart": "2017-08-03T15:10:20.42", "dateEnd": "2017-08-03T15:10:23.353" }, { "lineId": 2, "lineName": "Line 2", "status": 2, "dateStart": "2017-08-03T15:10:30.42", "dateEnd": "2017-08-03T15:10:33.353" }, { "lineId": 3, "lineName": "Line 3", "status": 3, "dateStart": "2017-08-03T15:10:40.42", "dateEnd": "2017-08-03T15:10:43.353" }, { "lineId": 4, "lineName": "Line 4", "status": 4, "dateStart": "2017-08-03T15:10:50.42", "dateEnd": "2017-08-03T15:10:53.353" }]; var container = document.getElementById('chart'); var chart = new google.visualization.Timeline(container); var dataTable = new google.visualization.DataTable(); dataTable.addColumn({type: 'string', id: 'row'}); dataTable.addColumn({type: 'string', id: 'bar'}); dataTable.addColumn({type: 'date', id: 'start'}); dataTable.addColumn({type: 'date', id: 'end'}); for (var i = 0; i < jsonData.length; i++) { dataTable.addRow( [jsonData[i].lineName.toString(), jsonData[i].status.toString(), new Date(jsonData[i].dateStart), new Date(jsonData[i].dateEnd)] ); } chart.draw(dataTable); }
＆＃13;
<script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart"></div>
＆＃13;
＆＃13;
＆＃13;

Answer 3

<g><text text-anchor="middle" x="NaN" y="21.05" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#000000"> </text></g>

x="NaN"将“NaN”更改为数字。

时间线图表栏中的错误：<text>属性x：预期长度，“NaN”

3 个答案: