Question

我正在使用下面的代码从图片中绘制4张图表。第一张和第二张图有3条线，最后两张图各有1条线。问题在于所有图形都使用相同的数字。该数字始终是函数中的最后一个数字：

function drawChart(number,number,number,number,number,number,number,number)

4个图的图像：

google.charts.load('current', {'packages':['corechart']});

google.charts.setOnLoadCallback(drawChart);
var numbersFromLabView = [];
var arrayFromLabView = [];
var time = [];

// na click bottuna
$('.viewbutton').click(function() {
  // Zovi api 
  $('#portfolio').addClass('hidden');
  $('#element-di-zivi-aplikacija').removeClass('hidden');
  setInterval(getDataFromLabView, 2000);
});

function getDataFromLabView() {
  var jsonData = $.ajax({
    url: 'projectXHTTP',
    dataType: 'json',
    success: function (jsonArray) {

      var zadnjiBroj   = jsonArray[0];
      var zadnjiBrojy  = jsonArray[1];
      var zadnjiBrojz  = jsonArray[2];
      var zadnjiBrojxa = jsonArray[3];
      var zadnjiBrojya = jsonArray[4];
      var zadnjiBrojza = jsonArray[5];
      var zadnjiBrojxb = jsonArray[6];
      var zadnjiBrojyb = jsonArray[7];  

      drawChart(zadnjiBroj, zadnjiBrojy ,zadnjiBrojz, zadnjiBrojxa, zadnjiBrojya, zadnjiBrojza, zadnjiBrojxb, zadnjiBrojyb);

      $(document.querySelector('.current-number'))  .text(zadnjiBroj);
      $(document.querySelector('.current-numbery')) .text(zadnjiBrojy);
      $(document.querySelector('.current-numberz')) .text(zadnjiBrojz);
      $(document.querySelector('.current-numberxa')).text(zadnjiBrojxa);
      $(document.querySelector('.current-numberya')).text(zadnjiBrojya);
      $(document.querySelector('.current-numberza')).text(zadnjiBrojza);
      $(document.querySelector('.current-numberxb')).text(zadnjiBrojxb);
      $(document.querySelector('.current-numberyb')).text(zadnjiBrojyb); 
    }
  });
}

function drawChart(number,number,number,number,number,number,number,number) {
  var data1  = new google.visualization.DataTable();
  moment.locale('hr'); 
  time.push(moment());
  numbersFromLabView.push(number );
  data1.addColumn('string', 'Time of Day');
  data1.addColumn('number', 'struja 1');
  numbersFromLabView.forEach((number, key) =>  {
    data1.addRow([time[key].format('LTS'), number]);
  });

  var data2  = new google.visualization.DataTable();
  moment.locale('hr'); 
  time.push(moment());
  numbersFromLabView.push(number );
  data2.addColumn('string', 'Time of Day');
  data2.addColumn('number', 'struja 2');
  numbersFromLabView.forEach((number, key) =>  {
    data2.addRow([time[key].format('LTS'), number]);
  });

  var data3  = new google.visualization.DataTable();
  moment.locale('hr'); 
  time.push(moment());
  numbersFromLabView.push(number );
  data3.addColumn('string', 'Time of Day');
  data3.addColumn('number', 'struja 3');
  numbersFromLabView.forEach((number, key) =>  {
    data3.addRow([time[key].format('LTS'), number]);
  });

  var data4  = new google.visualization.DataTable();
  moment.locale('hr'); 
  time.push(moment());
  numbersFromLabView.push(number );
  data4.addColumn('string', 'Time of Day');
  data4.addColumn('number', 'napon 1');
  numbersFromLabView.forEach((number, key) =>  {
    data4.addRow([time[key].format('LTS'), number]);
  });

  var data5  = new google.visualization.DataTable();
  moment.locale('hr'); 
  time.push(moment());
  numbersFromLabView.push(number );
  data5.addColumn('string', 'Time of Day');
  data5.addColumn('number', 'napon 2');
  numbersFromLabView.forEach((number, key) =>  {
    data5.addRow([time[key].format('LTS'), number]);
  });

  var data6  = new google.visualization.DataTable();
  moment.locale('hr'); 
  time.push(moment());
  numbersFromLabView.push(number );
  data6.addColumn('string', 'Time of Day');
  data6.addColumn('number', 'napon 3');
  numbersFromLabView.forEach((number, key) =>  {
    data6.addRow([time[key].format('LTS'), number]);
  });

  var data7  = new google.visualization.DataTable();
  moment.locale('hr'); 
  time.push(moment());
  numbersFromLabView.push(number );
  data7.addColumn('string', 'Time of Day');
  data7.addColumn('number', 'snaga');
  numbersFromLabView.forEach((number, key) =>  {
    data7.addRow([time[key].format('LTS'), number]);
  });

  var data8  = new google.visualization.DataTable();
  moment.locale('hr'); 
  time.push(moment());
  numbersFromLabView.push(number );
  data8.addColumn('string', 'Time of Day');
  data8.addColumn('number', 'frekvencija');
  numbersFromLabView.forEach((number, key) =>  {
    data8.addRow([time[key].format('LTS'), number]);
  }); 

  // chart1
  var joinedData = google.visualization.data.join(data1, data2, 'full', [[0, 0]], [1], [1]);
  var joinedData2 = google.visualization.data.join(joinedData, data3, 'full', [[0, 0]], [1, 2], [1]);

  // chart2
  var joinedData3 = google.visualization.data.join(data4, data5, 'full', [[0, 0]], [1], [1]);
  var joinedData4 = google.visualization.data.join(joinedData3, data6, 'full', [[0, 0]], [1, 2], [1]);

  // stil
  var options = {
    background: 'transparent',
    title: 'Numeric values from LabView on time scale',
    height: '500px',
    width: '100%',
    interpolateNulls: true,
    hAxis: {
      title: 'Vrijeme',
    },
    vAxis: {
      title: 'Amplituda',   
    }
  }

  var chart  = new google.visualization.LineChart(document.querySelector('#chart_div'));
  var chart2 = new google.visualization.LineChart(document.querySelector('#chart_div2'));
  var chart3 = new google.visualization.LineChart(document.querySelector('#chart_div3'));
  var chart4 = new google.visualization.LineChart(document.querySelector('#chart_div4'));

  chart.draw(joinedData2, options);
  chart2.draw(joinedData4, options);
  chart3.draw(data7, options);
  chart4.draw(data8, options);
}

我在Google图表上发布的信息可能更容易理解，因为我无法在此处放置图片和代码：https://groups.google.com/forum/?hl=hr#!topic/google-visualization-api/COqmaH-_myQ

Answer 1

drawChart函数的参数都具有相同的名称-> number
它们需要唯一，只需使用与上面声明的名称相同的名称即可...

来自...

function drawChart(number,number,number,number,number,number,number,number) {

到...

function drawChart(zadnjiBroj, zadnjiBrojy ,zadnjiBrojz, zadnjiBrojxa, zadnjiBrojya, zadnjiBrojza, zadnjiBrojxb, zadnjiBrojyb)

当然，这意味着您还需要更改使用这些参数的代码...

有没有办法绘制连接到正确数据的正确线？

1 个答案: