Question

我不明白为什么当我使用数据表创建一个包含Google图表的表时，我在第二个'action_id'列中获得了NaN。数据表来自我使用csv模块在Python中转换的.csv文件。

这是仅包含原始数组样本的代码。它太大了，不能方便地张贴在这里。

<html> 
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">

  // Load the Visualization API and the controls package.
  google.charts.load('current', {'packages':['corechart', 'table', 'gauge', 'controls']});

  // Set a callback to run when the Google Visualization API is loaded.
  google.charts.setOnLoadCallback(drawDashboard);

  // Callback that creates and populates a data table,
  // instantiates a dashboard, a range slider and a pie chart,
  // passes in the data and draws it.
  function drawDashboard() {

    // Create our data table.
    var data = google.visualization.arrayToDataTable([['agent_id', 'action_id', 'object_definition_name', 'object_definition_description', 'timestamp', 'readable_result_duration', 'result_response'], ['alex.pearce@sjpp.co.uk', 'downloaded', 'AF1 Assignment 3 Question1 NIC', 'AF1 Assignment 3 Question1 NIC', '2016-07-29T15:29:50.354Z', '', ''], ['alex.pearce@sjpp.co.uk', 'earned', 'AF1 Module 2 Assignment', 'AF1 Module 2 Assignment', '2016-07-29T14:24:07.187Z', '', ''], ['alex.pearce@sjpp.co.uk', 'earned', 'Completed lesson "AF1 Module 2: Capital Gains Tax"', 'Completed lesson "AF1 Module 2: Capital Gains Tax"', '2016-07-29T14:24:07.68Z', '', ''], ['alex.pearce@sjpp.co.uk', 'completed', 'AF1 Module 2: Capital Gains Tax', 'AF1 Module 2: Capital Gains Tax', '2016-07-29T14:24:06.840Z', '', ''], ['alex.pearce@sjpp.co.uk', 'earned', 'AF1 Module 2', 'AF1 Module 2', '2016-07-29T14:15:18.14Z', '', ''], ['alex.pearce@sjpp.co.uk', 'earned', 'Completed quiz \xc3\xa2\xe2\x82\xac\xc5\x93AF1 M2 CGT\xc3\xa2\xe2\x82\xac\xc2\x9d with a score of 80 or higher', 'Completed quiz \xc3\xa2\xe2\x82\xac\xc5\x93AF1 M2 CGT\xc3\xa2\xe2\x82\xac\xc2\x9d with a score of 80 or higher', '2016-07-29T14:15:17.886Z', '', ''], ['alex.pearce@sjpp.co.uk', 'completed', 'AF1 M2 CGT', 'AF1 M2 CGT', '2016-07-29T14:15:17.616Z', '22min 49sec', ''], ['alex.pearce@sjpp.co.uk', 'downloaded', 'AF1 Assignment 2 Q&A July 2016', 'AF1 Assignment 2 Q&A July 2016', '2016-07-25T22:25:04.85Z', '', ''], ['alex.pearce@sjpp.co.uk', 'downloaded', 'AF1 Assignment 2 CGT Question July 2016', 'AF1 Assignment 2 CGT Question July 2016', '2016-07-25T22:00:44.152Z', '', ''], ['alex.pearce@sjpp.co.uk', 'completed', 'AF1 M2 CGT', 'AF1 M2 CGT', '2016-07-25T21:56:56.648Z', '19min 3sec', ''], ['alex.pearce@sjpp.co.uk', 'completed', 'AF1 M2 CGT Main reliefs video', '', '2016-07-25T21:37:51.197Z', '18min 36sec', ''], ['alex.pearce@sjpp.co.uk', 'completed', 'AF1 M2 CGT calculation structure video', '', '2016-07-25T21:14:56.292Z', '24min 7sec', '']]);

    // Create a dashboard.
    var dashboard = new google.visualization.Dashboard(
        document.getElementById('dashboard_div'));


var categoryPicker = new google.visualization.ControlWrapper({
  'controlType': 'CategoryFilter',
      'containerId': 'categoryPicker_div',
      'options': {
      'filterColumnIndex': 0,
  'ui': {
        'labelStacking': 'vertical',
        'label': 'Filter:'
        }
      }
    });
   var table = new google.visualization.ChartWrapper({
      'chartType': 'Table',
      'containerId': 'table_div',
      'options': {
      }
    });
    // Establish dependencies, declaring that 'filter' drives 'pieChart',
    // so that the pie chart will only display entries that are let through
    // given the chosen slider range.
    dashboard.bind(categoryPicker, [pieChart, table]);

    // Draw the dashboard.
    dashboard.draw(data);
  }
</script>
 </head>

<body>
<!--Div that will hold the dashboard-->
<div id="dashboard_div">
  <!--Divs that will hold each control and chart-->
  <div id="categoryPicker_div"></div>
  <div id="chart_div"></div>
  <div id="table_div"></div>
</div>
</body>
</html>

非常感谢任何帮助。

Answer 1

来自问题的代码似乎在这里工作得很好......

＆＃13;

google.charts.load('current', {'packages':['corechart', 'table', 'gauge', 'controls']});
google.charts.setOnLoadCallback(drawDashboard);

function drawDashboard() {
  var data = google.visualization.arrayToDataTable([['agent_id', 'action_id', 'object_definition_name', 'object_definition_description', 'timestamp', 'readable_result_duration', 'result_response'], ['alex.pearce@sjpp.co.uk', 'downloaded', 'AF1 Assignment 3 Question1 NIC', 'AF1 Assignment 3 Question1 NIC', '2016-07-29T15:29:50.354Z', '', ''], ['alex.pearce@sjpp.co.uk', 'earned', 'AF1 Module 2 Assignment', 'AF1 Module 2 Assignment', '2016-07-29T14:24:07.187Z', '', ''], ['alex.pearce@sjpp.co.uk', 'earned', 'Completed lesson "AF1 Module 2: Capital Gains Tax"', 'Completed lesson "AF1 Module 2: Capital Gains Tax"', '2016-07-29T14:24:07.68Z', '', ''], ['alex.pearce@sjpp.co.uk', 'completed', 'AF1 Module 2: Capital Gains Tax', 'AF1 Module 2: Capital Gains Tax', '2016-07-29T14:24:06.840Z', '', ''], ['alex.pearce@sjpp.co.uk', 'earned', 'AF1 Module 2', 'AF1 Module 2', '2016-07-29T14:15:18.14Z', '', ''], ['alex.pearce@sjpp.co.uk', 'earned', 'Completed quiz \xc3\xa2\xe2\x82\xac\xc5\x93AF1 M2 CGT\xc3\xa2\xe2\x82\xac\xc2\x9d with a score of 80 or higher', 'Completed quiz \xc3\xa2\xe2\x82\xac\xc5\x93AF1 M2 CGT\xc3\xa2\xe2\x82\xac\xc2\x9d with a score of 80 or higher', '2016-07-29T14:15:17.886Z', '', ''], ['alex.pearce@sjpp.co.uk', 'completed', 'AF1 M2 CGT', 'AF1 M2 CGT', '2016-07-29T14:15:17.616Z', '22min 49sec', ''], ['alex.pearce@sjpp.co.uk', 'downloaded', 'AF1 Assignment 2 Q&A July 2016', 'AF1 Assignment 2 Q&A July 2016', '2016-07-25T22:25:04.85Z', '', ''], ['alex.pearce@sjpp.co.uk', 'downloaded', 'AF1 Assignment 2 CGT Question July 2016', 'AF1 Assignment 2 CGT Question July 2016', '2016-07-25T22:00:44.152Z', '', ''], ['alex.pearce@sjpp.co.uk', 'completed', 'AF1 M2 CGT', 'AF1 M2 CGT', '2016-07-25T21:56:56.648Z', '19min 3sec', ''], ['alex.pearce@sjpp.co.uk', 'completed', 'AF1 M2 CGT Main reliefs video', '', '2016-07-25T21:37:51.197Z', '18min 36sec', ''], ['alex.pearce@sjpp.co.uk', 'completed', 'AF1 M2 CGT calculation structure video', '', '2016-07-25T21:14:56.292Z', '24min 7sec', '']]);

  var dashboard = new google.visualization.Dashboard(
    document.getElementById('dashboard_div')
  );

  var categoryPicker = new google.visualization.ControlWrapper({
    controlType: 'CategoryFilter',
    containerId: 'categoryPicker_div',
    options: {
      filterColumnIndex: 0,
      ui: {
        labelStacking: 'vertical',
        label: 'Filter:'
      }
    }
  });

  var table = new google.visualization.ChartWrapper({
    chartType: 'Table',
    containerId: 'table_div'
  });

  dashboard.bind(categoryPicker, [table]);
  dashboard.draw(data);
}

＆＃13;

div {
  padding: 8px;
}

＆＃13;

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

＆＃13;

表格中的NaN由Google Charts生成

1 个答案: