如何使用Chart JS在一张图中创建带有动态X和Y轴的多折线图？

Question

我想创建一个具有动态变化的x和y轴值的多折线图。我的Y轴的值是

traverse1 = [10,20,30,45,65,98]
traverse2 = [10,36,56,44,60,100]
traverse3 = [55,65,90,49,55,13]
traverse4 = [59,68,95,59,35,15]

我的X轴的值是

 master = [0.1,0.2,0.3,0.5,,0.6]

X和Y的所有值都将由用户动态更改。 我试图绘制一个图，但是在动态更改值之后，我的图看起来像这样。 。

您可以在图形中看到，每行X轴都有一个单独的标签。我想要的是图中所有线条的通用x轴。下面是我用来绘制图形的代码。

function chartCall(master, traverse1, traverse2, traverse3, traverse4)
{
    var canvas = document.getElementById("barChart");
    var ctx = canvas.getContext('2d');

    // Global Options:
    Chart.defaults.global.defaultFontColor = 'black';
    Chart.defaults.global.defaultFontSize = 16;

    var dataFirst = {
            label: "Traverse 1",
            data: traverse1,
            borderColor: "rgb(151,187,205)",
          };

        var dataSecond = {
            label: "Traverse 2",    
            data: traverse2,
            borderColor: "rgb(220,220,220)",
          };

        var dataThird = {
                label: "Traverse 3",
                data: traverse3,
                borderColor: "rgb(247,70,74)",

              };

        var dataFourth = {
                label: "Traverse 4",
                data: traverse4,
                borderColor: "rgb(70,191,189)",
              };

        var speedData = {
                  labels: master,
                  datasets: [dataFirst,dataSecond,dataThird,dataFourth]
                };

    // Chart declaration:
    var myBarChart = new Chart(ctx, {
      type: 'line',
      data: speedData,
      options: {}
    });
}

Answer 1

该图表似乎与问题中张贴的代码完全吻合
即使更改值并再次调用也是如此。

请参阅以下工作片段，
单击按钮以使用不同的值更新图表...

$(document).ready(function() {
  var traverse1 = [10,20,30,45,65,98];
  var traverse2 = [10,36,56,44,60,100];
  var traverse3 = [55,65,90,49,55,13];
  var traverse4 = [59,68,95,59,35,15];
  var master = [0.1,0.2,0.3,0.5,,0.6];

  chartCall(master, traverse1, traverse2, traverse3, traverse4);

  document.getElementById('update').addEventListener('click', function () {
    var traverse1 = getRandomValues(6);
    var traverse2 = getRandomValues(6);
    var traverse3 = getRandomValues(6);
    var traverse4 = getRandomValues(6);
    var master = [0.1,0.2,0.3,0.5,,0.6];
    chartCall(master, traverse1, traverse2, traverse3, traverse4);
  });

  function chartCall(master, traverse1, traverse2, traverse3, traverse4) {
    var canvas = document.getElementById("barChart");
    var ctx = canvas.getContext('2d');

    // Global Options:
    Chart.defaults.global.defaultFontColor = 'black';
    Chart.defaults.global.defaultFontSize = 16;

    var dataFirst = {
      label: "Traverse 1",
      data: traverse1,
      borderColor: "rgb(151,187,205)",
    };

    var dataSecond = {
      label: "Traverse 2",
      data: traverse2,
      borderColor: "rgb(220,220,220)",
    };

    var dataThird = {
      label: "Traverse 3",
      data: traverse3,
      borderColor: "rgb(247,70,74)",
    };

    var dataFourth = {
      label: "Traverse 4",
      data: traverse4,
      borderColor: "rgb(70,191,189)",
    };

    var speedData = {
      labels: master,
      datasets: [dataFirst,dataSecond,dataThird,dataFourth]
    };

    // Chart declaration:
    var myBarChart = new Chart(ctx, {
      type: 'line',
      data: speedData,
      options: {}
    });
  }

  function getRandomValues(length) {
    var values = [];
    for (var i = 0; i < length; i++) {
      values.push(Math.random() * 10);
    }
    return values;
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<input id="update" type="button" value="Update Chart" />
<canvas id="barChart"></canvas>