Question

我使用带有播放/暂停功能的canvasJS创建了一个动态折线图。但是图表中的线似乎没有流过y轴。在线的起点和y轴之间有一些空格。。如何移除该空间，以便在按下PLAY按钮时线条移动到不断流动/移动。

<!DOCTYPE HTML>
<html>

<head>
  <script src="https://code.jquery.com/jquery-3.1.0.js" integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk=" crossorigin="anonymous"></script>
  <script type="text/javascript" src="canvasjs.min.js"></script>
  <script type="text/javascript">
    var dataArray = [{
      x: 0,
      y: 0
    },{
      x: 1,
      y: 10
    }, {
      x: 2,
      y: 13
    }, {
      x: 3,
      y: 18
    }, {
      x: 4,
      y: 20
    }, {
      x: 5,
      y: 17
    }, {
      x: 6,
      y: 10
    }, {
      x: 7,
      y: 13
    }, {
      x: 8,
      y: 18
    }, {
      x: 9,
      y: 20
    }, {
      x: 10,
      y: 17
    }, {
      x: 11,
      y: 13
    }, {
      x: 12,
      y: 18
    }, {
      x: 13,
      y: 20
    }, {
      x: 14,
      y: 17
    }, {
      x: 15,
      y: 10
    }, {
      x: 17,
      y: 13
    }, {
      x: 18,
      y: 18
    }, {
      x: 19,
      y: 20
    }, {
      x: 20,
      y: 100
    }];

    function plot(dataArray,windowFrame,chartTitle,xAxisTitle,yAxisTitle) {
      var dps=[];
      for(var a=0;a<windowFrame;a++)
      {
        dps[a]=dataArray[a];
      }

      var chart = new CanvasJS.Chart("chartContainer", {
        title: {
          text: chartTitle
        },
        axisX: {
          title: xAxisTitle
        },
        axisY: {
          title: yAxisTitle
        },
        data: [{
          type: "line",
          dataPoints: dps
        }]
      });

      chart.render();
      $(".canvasjs-chart-credit").empty();



      var updateInterval = 1000;
      var flag = true;
      var interval;

      var updateChart = function() {

       if(a<dataArray.length)
       {
        dps.push({
          x: dataArray[a].x,
          y: dataArray[a].y
        });
        a++;


        if (dps.length > windowFrame+1) {
          dps.shift();
        }
       }


        chart.render();

        // update chart after specified time. 

      };
      $('#playPause').click(function() {

        if (flag) {
          $(this).html('Pause');
          interval = setInterval(function() {
            updateChart()
          }, updateInterval);
        } else {
          $(this).html('Play');
          clearInterval(interval);
        }
        flag = !flag;
      });

    }
  </script>
</head>

<body>
  <button id="Plot" onclick="plot(dataArray,5,'Chart Title','x-axisTitle','y-axis Title')">Plot</button>
  <div id="chartContainer" style="height: 600px; width: 500px;">
  </div>
  <button id="playPause">Play/ Pause</button>
</body>

</html>

Answer 1

要删除axisY和行之间的空格，您可以将viewportMinimum设置/更新为启动x值。这是更新的代码段。

  var dataArray = [{
      x: 0,
      y: 0
    },{
      x: 1,
      y: 10
    }, {
      x: 2,
      y: 13
    }, {
      x: 3,
      y: 18
    }, {
      x: 4,
      y: 20
    }, {
      x: 5,
      y: 17
    }, {
      x: 6,
      y: 10
    }, {
      x: 7,
      y: 13
    }, {
      x: 8,
      y: 18
    }, {
      x: 9,
      y: 20
    }, {
      x: 10,
      y: 17
    }, {
      x: 11,
      y: 13
    }, {
      x: 12,
      y: 18
    }, {
      x: 13,
      y: 20
    }, {
      x: 14,
      y: 17
    }, {
      x: 15,
      y: 10
    }, {
      x: 17,
      y: 13
    }, {
      x: 18,
      y: 18
    }, {
      x: 19,
      y: 20
    }, {
      x: 20,
      y: 100
    }];
document.getElementById("Plot").onclick = function(){
	plot(dataArray,5,'Chart Title','x-axisTitle','y-axis Title')
}
    function plot(dataArray,windowFrame,chartTitle,xAxisTitle,yAxisTitle) {
      var dps=[];
      for(var a=0;a<windowFrame;a++)
      {
        dps[a]=dataArray[a];
      }

      var chart = new CanvasJS.Chart("chartContainer", {
        title: {
          text: chartTitle
        },
        axisX: {
          title: xAxisTitle,
          viewportMinimum: 0
        },
        axisY: {
          title: yAxisTitle
        },
        data: [{
          type: "line",
          dataPoints: dps
        }]
      });

      chart.render();
      $(".canvasjs-chart-credit").empty();



      var updateInterval = 1000;
      var flag = true;
      var interval;

      var updateChart = function() {

       if(a<dataArray.length)
       {
        dps.push({
          x: dataArray[a].x,
          y: dataArray[a].y
        });
        a++;


        if (dps.length > windowFrame+1) {
          dps.shift();
        }
       }

				chart.options.axisX.viewportMinimum = dps[0].x;
        chart.render();

        // update chart after specified time. 

      };
      $('#playPause').click(function() {

        if (flag) {
          $(this).html('Pause');
          interval = setInterval(function() {
            updateChart()
          }, updateInterval);
        } else {
          $(this).html('Play');
          clearInterval(interval);
        }
        flag = !flag;
      });

    }

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="Plot" >Plot</button>
  <div id="chartContainer" style="height: 600px; width: 500px;">
  </div>
  <button id="playPause">Play/ Pause</button>

如何删除Dynamic CANVAS JS折线图中动态线与相应y轴之间的空间

1 个答案: