如何使用陣列從谷歌制作散點圖？-有解無憂

由于陣列的“型別”，我在創建圖表時遇到了一些問題，例如在var data = ...他們使用的示例中，[12, 30], [14, 98]但我想使用像我在這些值的代碼中定義的陣列，我不知道我該怎么做到那個。

$(document).ready(function() {
  console.log("ready!");

  ko.applyBindings(new vm());

  var k = 0;
  var Arraydata1 = [];
  var Arraydata2 = [];

  console.log(indice)
  $.ajax({
    url: 'http://192.168.160.58/Formula1/api/Statistics/Driver?id='   indice,
    contentType: "application/json",
    dataType: 'json',
    success: function(data) {
      for (k = 0; k < data.Career.length; k  ) {

        Arraydata1.push(data.Career[k].Year);
        Arraydata2.push(data.Career[k].Position);

      }
      drawChart(Arraydata1, Arraydata2)
    },
  });

});

function drawChart(Arraydata1, Arraydata2) {
  var data = google.visualization.arrayToDataTable([
    ['Price', 'Size'],
    // dont know what to put here
  ]);
  // Set Options
  var options = {
    title: 'House Prices vs. Size',
    hAxis: {
      title: 'Square Meters'
    },
    vAxis: {
      title: 'Price in Millions'
    },
    legend: 'none'
  };
  // Draw
  var chart = new google.visualization.ScatterChart(document.getElementById('myChart'));
  chart.draw(data, options);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

uj5u.com熱心網友回復：

將行值Career合并到一個陣列中——Arraydata

Arraydata.push([data.Career[k].Year, data.Career[k].Position]);

傳遞該陣列以繪制圖表

drawChart(Arraydata);

然后創建具有必要列標題的資料表，
并使用該addRows方法。

// create data table
var data = new google.visualization.DataTable();
data.addColumn('number', 'Price');
data.addColumn('number', 'Size');
data.addRows(Arraydata);

請參閱以下片段...

$(document).ready(function() {
  console.log("ready!");

  ko.applyBindings(new vm());

  var k = 0;
  var Arraydata = [];

  console.log(indice)
  $.ajax({
    url: 'http://192.168.160.58/Formula1/api/Statistics/Driver?id='   indice,
    contentType: "application/json",
    dataType: 'json',
    success: function(data) {
      for (k = 0; k < data.Career.length; k  ) {

        Arraydata.push([data.Career[k].Year, data.Career[k].Position]);

      }
      drawChart(Arraydata);
    },
  });

});

function drawChart(Arraydata) {
  // create data table
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'Price');
  data.addColumn('number', 'Size');
  data.addRows(Arraydata);

  // Set Options
  var options = {
    title: 'House Prices vs. Size',
    hAxis: {
      title: 'Square Meters'
    },
    vAxis: {
      title: 'Price in Millions'
    },
    legend: 'none'
  };
  // Draw
  var chart = new google.visualization.ScatterChart(document.getElementById('myChart'));
  chart.draw(data, options);
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/418591.html

標籤：

上一篇：當我嘗試使用id屬性而不是值時，Jquery選擇器停止作業

下一篇：當螢屏不是全屏時，使影像不可用