highcharts：绘制未分类的数据，并相互绘制x轴和y轴

Question

我想使用高图表将x轴值与y轴值（都是未排序的）相互绘制，但是当我绘制数据时，它是从最小的x轴值开始并绘制它，无论数据的顺序如何。 是否有任何解决方法使它看起来像普通的情节没有任何数据预先订购。 这是我jsfiddle的链接：

//RESIZE THE CHART-SECTION TO SEE ISSUE (ARROW)

$(function() {

  (function(H) {

    var arrowCheck = false,
      pathTag;

    H.wrap(H.Series.prototype, 'drawGraph', function(proceed) {

      // Now apply the original function with the original arguments, 
      // which are sliced off this function's arguments
      proceed.apply(this, Array.prototype.slice.call(arguments, 1));

      if (this.chart.options.plotOptions.showArrow) {
        // used a bit of regex to clean up the series name enough to be used as an id
        var arrowName = "arrow" + this.name.replace(/\W/g, "_").toLowerCase();

        var arrowLength = 15,
          arrowWidth = 9,
          series = this,
          data = series.data,
          len = data.length,
          segments = data,
          lastSeg = segments[segments.length - 1],
          path = [],
          lastPoint = null,
          nextLastPoint = null;

        if (lastSeg.y == 0) {
          lastPoint = segments[segments.length - 2];
          nextLastPoint = segments[segments.length - 1];
        } else {
          lastPoint = segments[segments.length - 1];
          nextLastPoint = segments[segments.length - 2];
        }

        var angle = Math.atan((lastPoint.plotX - nextLastPoint.plotX) /
          (lastPoint.plotY - nextLastPoint.plotY));

        if (angle < 0) angle = Math.PI + angle;

        path.push('M', lastPoint.plotX, lastPoint.plotY);

        if (lastPoint.plotX > nextLastPoint.plotX) {

          if (arrowCheck === true) {
            //replaced 'arrow' with arrowName
            pathTag = document.getElementById(arrowName);
            if (pathTag != null) {
              pathTag.remove(pathTag);
            }
          }

          path.push(
            'L',
            lastPoint.plotX + arrowWidth * Math.cos(angle),
            lastPoint.plotY - arrowWidth * Math.sin(angle)
          );
          path.push(
            lastPoint.plotX + arrowLength * Math.sin(angle),
            lastPoint.plotY + arrowLength * Math.cos(angle)
          );
          path.push(
            lastPoint.plotX - arrowWidth * Math.cos(angle),
            lastPoint.plotY + arrowWidth * Math.sin(angle),
            'Z'
          );
        } else {


          if (arrowCheck === true) {
            //replaced 'arrow' with arrowName
            pathTag = document.getElementById(arrowName);
            if (pathTag != null) {
              pathTag.remove(pathTag);
            }
          }

          path.push(
            'L',
            lastPoint.plotX - arrowWidth * Math.cos(angle),
            lastPoint.plotY + arrowWidth * Math.sin(angle)
          );
          path.push(
            lastPoint.plotX - arrowLength * Math.sin(angle),
            lastPoint.plotY - arrowLength * Math.cos(angle)
          );
          path.push(
            lastPoint.plotX + arrowWidth * Math.cos(angle),
            lastPoint.plotY - arrowWidth * Math.sin(angle),
            'Z'
          );
        }

        series.chart.renderer.path(path)
          .attr({
            fill: series.color,
            id: arrowName //changed from 'arrow' to arrowName to enable more than one series with an arrow
          })
          .add(series.group);

        arrowCheck = true;

      }
    });
  }(Highcharts));


  Highcharts.chart('graph-container-2', {
    chart: {
      type: 'spline',
    },
    title: {
      text: 'Chart example 2 (with NO arrow)'
    },
    xAxis: {
      reversed: false,
      maxPadding: 0.05,
      showLastLabel: true
    },
    yAxis: {
      lineWidth: 2
    },
    legend: {
      enabled: false
    },
    plotOptions: {
      spline: {
        marker: {
          enable: false
        }
      }
    },
    series: [{
      data: [
        [0, 15],
        [10, -50],
        [20, -56.5],
        [30, -46.5],
        [40, -22.1],
        [50, -2.5],
        [60, -27.7],
        [70, -55.7],
        [80, -76.5]
      ]
    }]
  });

  var chart = new Highcharts.Chart({
    chart: {
      renderTo: 'graph-container-1',
      defaultSeriesType: 'scatter'
    },
    title: {
      text: 'Chart example 1 (WITH arrow)'
    },
    xAxis: {
      min: 0,
      max: 5
    },
    plotOptions: {

      series: {
        animation: {
          duration: 2000
        },
        lineWidth: 2,
        marker: {
          enabled: false
        }
      },

      states: {
        hover: {
          enabled: true,
          lineWidth: 2
        },

      },
      showArrow: true

    },

    series: [{
      name: 'main',
      id: 'main',
      data: [
        [4, 0],
        [3, 4],
        [4, 3]
      ]
    }]
  });

});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<body>
  <div>
    <ul class="nav nav-tabs">
      <li class="active">
        <a href="#1" data-toggle="tab">Tab 1</a>
      </li>
      <li>
        <a href="#2" data-toggle="tab">Tab 2</a>
      </li>
    </ul>

    <div class="tab-content">
      <div class="tab-pane active" id="1">
        <div class="col-md-6">
          <div id="graph-container-1" style="min-width: 500px; max-width: 800px; height: 300px; margin: 0 auto"></div>
        </div>
      </div>
      <div class="tab-pane" id="2">
        <div class="col-md-6">
          <div id="graph-container-2" style="min-width: 500px; max-width: 800px; height: 300px; margin: 0 auto"></div>
        </div>
      </div>
    </div>
  </div>
</body>