Google 个图表不遵循点的顺序

Question

我正在创建一个具有 table x、y 和 α、β 的网络应用程序，供用户输入并将它们绘制在 google 折线图上作为 2 个不同的系列。但是，google图表不遵循坐标的顺序，而是跳转到不同的顺序。点在那里，直线遵循不寻常的可能是坐标之间的最短距离，如下图所示，而不是正方形，就像 N。 example graph of square 代码如下：

google.charts.load('current', {packages: ['corechart']});
      google.charts.setOnLoadCallback(drawCurveTypes);
      const input = document.querySelector('table');
      input.addEventListener('input', updateValue);

      function updateValue(e)   {  drawCurveTypes()  }
      function drawCurveTypes() {
            var data  = new google.visualization.DataTable();
            var data2 = new google.visualization.DataTable();
            var x  = [];
            var y  = []; 
            var a  = [];
            var b  = [];
            var s  = [];
            var ss = [];
            for (var i = 0; i < 20; i++) {
                   var u = i+1
                   x[i] =    +document.getElementById("x"+u).value;
                   y[i] =    +document.getElementById("y"+u).value;
              if (x[i]!==0 || y[i]!==0) {
                var temp=[]
                temp.push( +document.getElementById("x"+u).value);
                temp.push( +document.getElementById("y"+u).value);
                  s.push(temp);
              }
            } 
             for (var i = 0; i < 20; i++) {
              var u = i+1
                a[i] =     +document.getElementById("a"+u).value;
                b[i] =     +document.getElementById("b"+u).value;
              if (a[i]!==0 || b[i]!==0) {
                 var temp=[]
                temp.push( +document.getElementById("a"+u).value);
                temp.push( +document.getElementById("b"+u).value);
                  ss.push(temp);
               }
               }

             data.addColumn('number', 'X');
             data.addColumn('number', 'Geometry');
             data.addRows(s);
            data2.addColumn('number', 'X');
            data2.addColumn('number', 'Columns');
            data2.addRows(ss);
            var joinedData = google.visualization.data.join(data, data2, 'full', [[0, 0]], [1], [1]);
            var options = {


              backgroundColor: '#35424a',
              legendTextColor:'#ffffff',
              chartArea:{left:60,width:'72%',height:'88%'},      
          };


            var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
            chart.draw(joinedData, options);
          }

<script src="https://www.gstatic.com/charts/loader.js"></script>
<table class="table" style="background: #35424a; padding:10px; float:left;">
                <tr>
                  <th>x</th>
                  <th>y</th>
                  <th>α</th>
                  <th>β</th>
                  <th>B</th>
                  <th>H</th>
                </tr>
                <tr>
                    <th><input type="number" id="x1"   /></th>
                    <th><input type="number" id="y1"   /></th>
                    <th><input type="number" id="a1"   /></th>
                    <th><input type="number" id="b1"   /></th>
                    <th><input type="number" id="w1"   /></th>
                    <th><input type="number" id="h1"   /></th>
                </tr>
                <tr>
                    <th><input type="number" id="x2"   /></th>
                    <th><input type="number" id="y2"   /></th>
                    <th><input type="number" id="a2"   /></th>
                    <th><input type="number" id="b2"   /></th>
                    <th><input type="number" id="w2"   /></th>
                    <th><input type="number" id="h2"   /></th>
                </tr>
                <tr>
                    <th><input type="number" id="x3"   /></th>
                    <th><input type="number" id="y3"   /></th>
                    <th><input type="number" id="a3"   /></th>
                    <th><input type="number" id="b3"   /></th>
                    <th><input type="number" id="w3"   /></th>
                    <th><input type="number" id="h3"   /></th>
                </tr>
                <tr>
                    <th><input type="number" id="x4"   /></th>
                    <th><input type="number" id="y4"   /></th>
                    <th><input type="number" id="a4"   /></th>
                    <th><input type="number" id="b4"   /></th>
                    <th><input type="number" id="w4"   /></th>
                    <th><input type="number" id="h4"   /></th>
                </tr>
                <tr>
                    <th><input type="number" id="x5"   /></th>
                    <th><input type="number" id="y5"   /></th>
                    <th><input type="number" id="a5"   /></th>
                    <th><input type="number" id="b5"   /></th>
                    <th><input type="number" id="w5"   /></th>
                    <th><input type="number" id="h5"   /></th>
                </tr>
              </table>
              
              <div id="chart_div" style="float:right ; height:600px; width:50%; padding-right:20px ; ">
        </div>

Answer 1

join 方法自动按第一列 table 对结果数据进行排序，
所以你得到的结果是...

相反，建议对两个系列使用一个数据 table，没有连接。

var data  = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Geometry');
data.addColumn('number', 'Columns');

要完成，加载数据时，只需使用 null 未加载的系列。
如果您有多个具有相同 x-axis 值的行，那很好。

然后您将从您的输入中得到原始订单 table。

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

google.charts.load('current', {
  packages: ['corechart']
}).then(drawCurveTypes);
function drawCurveTypes() {
  var data  = new google.visualization.DataTable();
  data.addColumn('number', 'X');
  data.addColumn('number', 'Geometry');
  data.addColumn('number', 'Columns');

  var x  = [];
  var y  = [];
  var a  = [];
  var b  = [];
  for (var i = 0; i < 5; i++) {
    var u = i+1
    x[i] = +document.getElementById("x"+u).value;
    y[i] = +document.getElementById("y"+u).value;
    if (x[i]!==0 || y[i]!==0) {
      data.addRow([x[i], y[i], null]);
    }
  }
  for (var i = 0; i < 5; i++) {
    var u = i+1
    a[i] = +document.getElementById("a"+u).value;
    b[i] = +document.getElementById("b"+u).value;
    if (a[i]!==0 || b[i]!==0) {
      data.addRow([a[i], null, b[i]]);
    }
  }
  var options = {
    backgroundColor: '#35424a',
    legendTextColor:'#ffffff',
    chartArea: {
      height: '100%',
      width: '100%',
      top: 40,
      left: 40,
      right: 40,
      bottom: 40
    },
    height: '100%',
    legend: {
      position: 'top'
    },
    width: '100%'
  };

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<table class="table" style="background: #35424a; padding:10px; float:left;">
  <tr>
    <th>x</th>
    <th>y</th>
    <th>α</th>
    <th>β</th>
    <th>B</th>
    <th>H</th>
  </tr>
  <tr>
      <th><input type="number" id="x1" value="1"  /></th>
      <th><input type="number" id="y1" value="1"   /></th>
      <th><input type="number" id="a1"   /></th>
      <th><input type="number" id="b1"   /></th>
      <th><input type="number" id="w1"   /></th>
      <th><input type="number" id="h1"   /></th>
  </tr>
  <tr>
      <th><input type="number" id="x2" value="-1"   /></th>
      <th><input type="number" id="y2" value="1"   /></th>
      <th><input type="number" id="a2"   /></th>
      <th><input type="number" id="b2"   /></th>
      <th><input type="number" id="w2"   /></th>
      <th><input type="number" id="h2"   /></th>
  </tr>
  <tr>
      <th><input type="number" id="x3" value="-1"   /></th>
      <th><input type="number" id="y3" value="-1"   /></th>
      <th><input type="number" id="a3"   /></th>
      <th><input type="number" id="b3"   /></th>
      <th><input type="number" id="w3"   /></th>
      <th><input type="number" id="h3"   /></th>
  </tr>
  <tr>
      <th><input type="number" id="x4" value="1"   /></th>
      <th><input type="number" id="y4" value="-1"   /></th>
      <th><input type="number" id="a4"   /></th>
      <th><input type="number" id="b4"   /></th>
      <th><input type="number" id="w4"   /></th>
      <th><input type="number" id="h4"   /></th>
  </tr>
  <tr>
      <th><input type="number" id="x5" value="1"   /></th>
      <th><input type="number" id="y5" value="1"   /></th>
      <th><input type="number" id="a5"   /></th>
      <th><input type="number" id="b5"   /></th>
      <th><input type="number" id="w5"   /></th>
      <th><input type="number" id="h5"   /></th>
  </tr>
</table>
<div id="chart_div" style="float:right ; height:600px; width:50%; padding-right:20px ; "></div>

Google 个图表不遵循点的顺序

Google graphs not following the sequence of points

html

javascript

charts

graph

google-visualization