如何创建动态数据集和新的动态多重yAxes

Question

我想根据下面的示例（URL）添加多个Y轴到图表script 1script 2

我按如下所示更改了代码，但是它不起作用。

function rdnum() {
  return Math.floor(Math.random() * 100);
}

var config = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: []
  },
  options: {
    scales: {
      yAxes: []
    }
  }
}
var i = 0;
var x;

var ctx = document.getElementById('chartJSContainer').getContext('2d');
var chart = new Chart(ctx, config);


addNewYAxe = function() {
  x = Date.now();

  let newDataset = {
    label: 'test' + '_' + i,
    data: [],
    yAxisID: "left" + x,
    fill: false
  };
  for (let index = 0; index < 6; ++index) {
    newDataset.data.push(rdnum());
  }

  chart.data.datasets[i] = newDataset;
  //chart.data.datasets.push(newDataset);

  console.log(chart.data.datasets);

  let y = {};
  chart.options.scales.yAxes[i] = y;
  //chart.options.scales.yAxes.push(y);

  let y2 = chart.options.scales.yAxes[i];
  y2.display = true;
  y2.type = "linear";
  y2.id = "left" + x;
  y2.position = "right";
  i++;

  console.log(chart.options.scales.yAxes);

  chart.update();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="addNewYAxe()">add new Y axe</button>
<canvas id="chartJSContainer" width="600" height="400"></canvas>

我想通过按钮将特定的数据动态地推送到数据集和Y轴，每次按下按钮都会向图表添加新的数据集和新的Y轴。我试图将这两个示例代码结合在一起，但出现错误。

Answer 1

问题出在chart.js版本上。如果您更新到最新版本（2.9.3），则问题已解决。

function rdnum() {
  return Math.floor(Math.random() * 100);
}

var config = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: []
  },
  options: {
    scales: {
      yAxes: []
    }
  }
}
var i = 0;
var x;

var ctx = document.getElementById('chartJSContainer').getContext('2d');
var chart = new Chart(ctx, config);


addNewYAxe = function() {
  x = Date.now();

  let newDataset = {
    label: 'test' + '_' + i,
    data: [],
    yAxisID: "left" + x,
    fill: false
  };
  for (let index = 0; index < 6; ++index) {
    newDataset.data.push(rdnum());
  }

  chart.data.datasets[i] = newDataset;
  //chart.data.datasets.push(newDataset);

  console.log(chart.data.datasets);

  let y = {};
  chart.options.scales.yAxes[i] = y;
  //chart.options.scales.yAxes.push(y);

  let y2 = chart.options.scales.yAxes[i];
  y2.display = true;
  y2.type = "linear";
  y2.id = "left" + x;
  y2.position = "right";
  i++;

  console.log(chart.options.scales.yAxes);

  chart.update();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="addNewYAxe()">add new Y axe</button>
<canvas id="chartJSContainer" width="600" height="400"></canvas>