如何在Charts JS中获取变量数据集?

mqkwyuun  于 2023-04-30  发布在  Chart.js
关注(0)|答案(1)|浏览(139)

我的数据集是可变数量的。意味着它们可以是2、4或6等。所以我需要在图表上绘制这些数据集。对于每个数据集的手动绘图,它工作正常:

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [
        {
          label: '# of Votes',
          data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
        },  
            {
                label: '# of Points',
                data: [7, 11, 5, 8, 3, 7],
                borderWidth: 1
            }
        ]
  },
  options: {
    scales: {
        yAxes: [{
        ticks: {
                    reverse: false
        }
      }]
    }
  }
}

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

如果我这样做:

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: ()=>{ [ return {label: '# of Votes',data: [12, 19, 3, 5, 2, 3],borderWidth:1}
        ]}
  },
  options: {
    scales: {
        yAxes: [{
        ticks: {
                    reverse: false
        }
      }]
    }
  }
}

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

它不工作。我以前见过像我为ticks编写的函数。但它在datasets上不起作用。我需要做的是遍历一个列表,并将几个数据集从其中生成一个数据集数组(代码不在这里写)。如果一个函数可以被创建,那么我可以很容易地为它编写代码来迭代)。请帮帮我先谢谢你了。

ss2ws0br

ss2ws0br1#

你可以创建一个自调用函数,它将返回一个像这样的数据集数组。

const options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: (() => {
      return [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      }];
    })()
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          reverse: false
        }
      }]
    }
  }
};

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

或者你可以在外部创建一个函数,它将返回数据集数组,并像下面这样调用它

datasets: getDataset()

相关问题