Question

在我的代码中，我以图表和表格格式显示了表格信息但我没有得到如何在drawchart（）函数中包含该表代码。需要帮助它提前谢谢。

我的代码是，

<script>
$(function() {
    var sampleData = [];
    $.getJSON('sampleData.json', function(data) {
        $.each(data.info, function(i, f) {
            var tblRow = "<tr>" + "<td>" + f.years + "</td>" + "<td>"
                    + f.sales + "</td>" + "<td>" + f.expenses + "</td>"
                    + "<td>" + f.profit + "</td>" + "</tr>"
            $(tblRow).appendTo("#userdata tbody");
        });

    });

});
</script>
<script type="text/javascript">
    google.charts.load('current', {'packages' : [ 'bar' ]});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
    var lines = "anupama";
    var data = google.visualization.arrayToDataTable([
            [ 'Year', 'Sales', 'Expenses', 'Profit' ],
            [ '2014', 1000, 400, 200 ], [ '2015', 1170, 460, 250 ],
            [ '2016', 660, 1120, 300 ], [ '2017', 1030, 540, 350 ]

    ]);

    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>
</head>
<body>
   <div id="barchart_material" style="width: 900px; height: 500px;"></div>

  <div class="wrapper">
    <div class="profile">
        <table id="userdata" border="2">
            <thead>
                <th>Years</th>
                <th>Sales</th>
                <th>Expenses</th>
                <th>profit</th>
            </thead>
            <tbody>

            </tbody>
        </table>

    </div>
</div>

如有任何建议，非常感谢。

Answer 1

试试这个：

＆＃13;

var sampleData = [['Year', 'Sales', 'Expenses', 'Profit']];

$(function() {
  
  $.getJSON('sampleData.json', function(data) {
    $.each(data.info, function(i, f) {
      sampleData.push([f.years, f.sales, f.expenses, f.profit]);
      
      var tblRow = "<tr>" + "<td>" + f.years + "</td>" + "<td>" +
        f.sales + "</td>" + "<td>" + f.expenses + "</td>" +
        "<td>" + f.profit + "</td>" + "</tr>"
      $(tblRow).appendTo("#userdata tbody");
    });

  });

});

google.charts.load('current', {
  'packages': ['bar']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var lines = "anupama";
  var data = google.visualization.arrayToDataTable(sampleData);

  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));
}

＆＃13;

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="barchart_material" style="width: 900px; height: 500px;"></div>

<div class="wrapper">
  <div class="profile">
    <table id="userdata" border="2">
      <thead>
        <th>Years</th>
        <th>Sales</th>
        <th>Expenses</th>
        <th>profit</th>
      </thead>
      <tbody>

      </tbody>
    </table>

  </div>
</div>

＆＃13;

Answer 2

建议首先加载谷歌，然后获取json

像这样......

google.charts.load('current', {
  callback: drawCharts,
  packages:['bar', 'table']
});

function drawCharts() {
  var chartData = [];

  $.getJSON('sampleData.json', function(data) {
    $.each(data.info, function(i, f) {
      if (i === 0) {
        var colHead = [];
        Object.keys(f).forEach(function (key) {
          colHead.push(key);
        });
        chartData.push(colHead);
      }

      var colVal = [];
      Object.keys(f).forEach(function (key) {
        colVal.push(f[key]);
      });
      chartData.push(colVal);
    });

    var data = google.visualization.arrayToDataTable(chartData);

    var options = {
      chart : {
        title : 'Company Performance',
        subtitle : 'Sales, Expenses, and Profit: 2014-2017',
      },
      bars : 'horizontal'
    };

    var chart = new google.charts.Bar(document.getElementById('barchart_material'));
    chart.draw(data, google.charts.Bar.convertOptions(options));

    var table = new google.visualization.Table(document.getElementById('table_chart'));
    table.draw(data);
  });
}

另外，谷歌有Table图表

提供排序等功能......

建议使用表格图表而不是构建自己的

请参阅以下工作代码段

使用评论中提供的json数据

＆＃13;

google.charts.load('current', {
  callback: drawCharts,
  packages:['bar', 'table']
});

function drawCharts() {
  var chartData = [];

  //$.getJSON('sampleData.json', function(data) {

    var data = { "info": [ { "years": 2014, "sales": 1000, "expenses": 400, "profit": 200 }, { "years": 2015, "sales": 1170, "expenses": 460, "profit": 250 }, { "years": 2016, "sales": 660, "expenses": 1120, "profit": 300 }, { "years": 2017, "sales": 1030, "expenses": 540, "profit": 350 } ] };

    $.each(data.info, function(i, f) {
      if (i === 0) {
        var colHead = [];
        Object.keys(f).forEach(function (key) {
          colHead.push(key);
        });
        chartData.push(colHead);
      }

      var colVal = [];
      Object.keys(f).forEach(function (key) {
        colVal.push(f[key]);
      });
      chartData.push(colVal);
    });

    var data = google.visualization.arrayToDataTable(chartData);

    var options = {
      chart : {
        title : 'Company Performance',
        subtitle : 'Sales, Expenses, and Profit: 2014-2017',
      },
      bars : 'horizontal'
    };

    var chart = new google.charts.Bar(document.getElementById('barchart_material'));
    chart.draw(data, google.charts.Bar.convertOptions(options));

    var table = new google.visualization.Table(document.getElementById('table_chart'));
    table.draw(data);

  //});
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="barchart_material"></div>
<div class="wrapper">
  <div class="profile">
    <div class="userdata" id="table_chart"></div>
  </div>
</div>

＆＃13;

我可以在函数调用中编写我的html正文内容吗？

2 个答案: