个人中心
gpt4 book ai didi

javascript - Google Charts 在图表的第二行添加

转载 作者：行者123 更新时间：2023-11-30 20:23:05 25 4
gpt4 key购买 nike

在谷歌图表中，我正在创建一个折线图来显示运行/失败之间的关系。下面的代码仅用于绘制折线图的第一部分“运行”，而忘记了“失败”列。因为我没有在我的数据中进行硬编码，所以我不确定如何使用 Google Charts 文档中的示例，发现 here .

-- 这表明他们使用 .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>

输出(仅显示运行): enter image description here

最佳答案

在为数据 View 构建列数组时，
从未引用 Fails 列，仅引用 Runs...

来自 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>

关于javascript - Google Charts 在图表的第二行添加，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51246784/

25 4 0
文章推荐： c# - WebActivator PreApplicationStartMethod 不工作
文章推荐： c# - 为 Windows 窗体 C# 设置日期时间选择器的最小日期
文章推荐： c# - 传递到字典中的模型项是 View 模型类型，但需要通用 IEnum
文章推荐： c - 输入代码..错误:entery. exe停止工作。 C语言
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com