Question

在Google图表中，我正在创建折线图以显示运行/失败之间的关系。下面的代码仅用于绘制折线图的第一部分“运行”，而忽略“失败”列。由于我不是要对数据进行硬编码，因此不确定here中如何使用Google图表文档中的示例。

-表明他们使用.addcolumn（）和.addrows（），但不确定在哪里实现。

-当我在chrome上查看开发人员控制台时，那里没有任何东西表明错误。

如果有人做了这样的事情并且可以指出正确的方向，那就太棒了。

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        google.charts.load('current', {'packages':['corechart']});
        google.charts.setOnLoadCallback(drawChart);
        function drawChart() {
            var data = google.visualization.arrayToDataTable([
                ['Name', 'RunDate', 'Runs', 'Fails'],
                <?php
                    $dbName = "my_test";
                    $config = parse_ini_file("myconfig.ini",true);
                    $dbUser = $config["DB"]["db_user"];
                    $dbServer = $config["DB"]["db_ip"];
                    $dbPassword = $config["DB"]["db_pass"];

                    $con = mysql_connect($dbServer, $dbUser, $dbPassword);

                    if (!$con) {
                        die('Could not connect: ' . mysql_error());
                    }

                    mysql_select_db($dbName, $con);

                    $sql = mysql_query("select * from GraphTest");

                    $output = array();

                    while($row = mysql_fetch_array($sql)) {
                        // create a temp array to hold the data
                        $temp = array();

                        // add the data
                        $temp[] = '"' . $row['Name'] . '"';
                        $temp[] = '"' . $row['RunDate'] . '"';
                        $temp[] = (int) $row['Runs'];
                        $temp[] = (int) $row['Fails'];
                        // implode the temp array into a comma-separated list and add to the output array
                        $output[] = '[' . implode(', ', $temp) . ']';
                    }
                    // implode the output into a comma-newline separated list and echo
                    echo implode(",\n", $output);

                    mysql_close($con);
                ?>
            ]);

            // parse the data table for a list of locations
            var locations = google.visualization.data.group(data, [0], []);
            // build an array of data column definitions
            var columns = [1];
            for (var i = 0; i < locations.getNumberOfRows(); i++) {
                var loc = locations.getValue(i, 0);
                columns.push({
                    label: loc,
                    type: 'number',
                    calc: function (dt, row) {
                        // include data in this column only if the location matches
                        return (dt.getValue(row, 0) == loc) ? dt.getValue(row, 2) : null;
                    }
                });
            }

            // create a DataView based on the DataTable to get the correct snapshot of the data for the chart
            var view = new google.visualization.DataView(data);
            // set the columns in the view to the columns we constructed above
            view.setColumns(columns);

            var options = {
                title: 'data test',
                curveType: 'function'
            };

            var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
            // draw the chart using the DataView instead of the DataTable
            chart.draw(view, options);
        }
    </script>
</head>
<body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>

输出（仅显示运行）：

Answer 1

在为数据视图构建columns数组时，
“失败”列永远不会被引用，只能运行...

来自calc函数...

// only Runs, column 2 is used
return (dt.getValue(row, 0) == loc) ? dt.getValue(row, 2) : null;

要从失败中获取数据，请添加另一列...

  // Runs
  columns.push({
      label: loc,
      type: 'number',
      calc: function (dt, row) {
          // include data in this column only if the location matches
          return (dt.getValue(row, 0) == loc) ? dt.getValue(row, 2) : null;
      }
  });

  // Fails
  columns.push({
      label: loc,
      type: 'number',
      calc: function (dt, row) {
          // include data in this column only if the location matches
          return (dt.getValue(row, 0) == loc) ? dt.getValue(row, 3) : null;
      }
  });

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

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Name', 'RunDate', 'Runs', 'Fails'],
    ['A', '2018-05-10', 5000, 6000],
    ['A', '2018-05-11', 6000, 5000],
    ['A', '2018-05-12', 7000, 6000],
    ['A', '2018-05-13', 8000, 5000],
    ['A', '2018-05-14', 9000, 6000],
  ]);

  var locations = google.visualization.data.group(data, [0], []);
  var columns = [1];
  for (var i = 0; i < locations.getNumberOfRows(); i++) {
      var loc = locations.getValue(i, 0);
      addColumn(loc);
  }

  function addColumn(loc) {
      columns.push({
          label: loc,
          type: 'number',
          calc: function (dt, row) {
              // include data in this column only if the location matches
              return (dt.getValue(row, 0) == loc) ? dt.getValue(row, 2) : null;
          }
      });
      columns.push({
          label: loc,
          type: 'number',
          calc: function (dt, row) {
              // include data in this column only if the location matches
              return (dt.getValue(row, 0) == loc) ? dt.getValue(row, 3) : null;
          }
      });
  }

  var view = new google.visualization.DataView(data);
  view.setColumns(columns);

  var options = {
    title: 'data test',
    curveType: 'function'
  };

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(view, options);
}

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

Google图表在图表中添加第二行

1 个答案: