Canvas 折线图中的动画

Question

我们如何在 jquery 中绘制和动画（连续运行）基本折线图。

你能帮帮我吗

我已尝试使用下面的代码，但无法按照图像运行。此代码给出折线图。我不需要 x 和 y 轴。只显示固化线连续显示他们的点

<div id="chartContainer" style="height: 370px; width:100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

<script type="text/javascript">
  window.onload = function() {
    var dps = [];
    var chart = new CanvasJS.Chart("chartContainer", {
      exportEnabled: true,
      title: { text: "Dynamic Spline Chart" },
      axisY: { includeZero: false },
      data: [{ type: "spline", markerSize: 0, dataPoints: dps }]
    });

    var xVal = 0;
    var yVal = 100;
    var updateInterval = 1000;
    var dataLength = 50; // number of dataPoints visible at any point

    var updateChart = function(count) {
      count = count || 1;
      // count is number of times loop runs to generate random dataPoints.
      for (var j = 0; j < count; j++) {
        yVal = yVal + Math.round(5 + Math.random() * (-5 - 5));
        dps.push({ x: xVal, y: yVal });
        xVal++;
      }
      if (dps.length > dataLength) {
        dps.shift();
      }
      chart.render();
    };

    updateChart(dataLength);
    setInterval(updateChart, updateInterval);
  }
</script>

Answer 1

轴有很多选项，看文档：
https://canvasjs.com/docs/charts/chart-options/axisx/

您可以使用 labelFormatter 隐藏轴标签，下面是基于您的代码的示例：

<div id="chartContainer" style="height: 180px; width:100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

<script type="text/javascript">
window.onload = function() {
    var dps = [];
    var chart = new CanvasJS.Chart("chartContainer", {
    exportEnabled: true,
    axisX: {includeZero: false, lineThickness: 0, labelFormatter: function(){return ""}},
    axisY: {includeZero: false, lineThickness: 0, labelFormatter: function(){return ""}},
    data: [{ type: "spline", markerSize: 0, dataPoints: dps }]
    });

    var xVal = 0;
    var yVal = 100;
    var dataLength = 50; // number of dataPoints visible at any point

    var updateChart = function(count) {
    count = count || 1;
    // count is number of times loop runs to generate random dataPoints.
    for (var j = 0; j < count; j++) {
        yVal = yVal + Math.round(5 + Math.random() * (-5 - 5));
        dps.push({ x: xVal++, y: yVal });
    }
    if (dps.length > dataLength) {
        dps.shift();
    }
    chart.render();
    };

    updateChart(dataLength);
    setInterval(updateChart, 1000);
}
</script>

Canvas 折线图中的动画

Canvas animation in line graph

html

jquery

canvas

jquery-ui-sortable

jquery-animate