在Javascript中循环使用有限的一组颜色,以获得不确定的数据集
我正在使用ChartJS显示股票数据。我有七种颜色,我想对这些对象进行迭代。当我添加第八个对象时,我希望它在图表上的颜色是颜色数组中的第一种颜色在Javascript中循环使用有限的一组颜色,以获得不确定的数据集,javascript,chart.js,Javascript,Chart.js,我正在使用ChartJS显示股票数据。我有七种颜色,我想对这些对象进行迭代。当我添加第八个对象时,我希望它在图表上的颜色是颜色数组中的第一种颜色 $(document).ready(function () { var context = document.getElementById('positions_chart'); var ctx = context.getContext("2d"); var quantities = []; $("#positions_chart
$(document).ready(function () {
var context = document.getElementById('positions_chart');
var ctx = context.getContext("2d");
var quantities = [];
$("#positions_chart").data('positions').forEach(function(element){
quantities.push(element['quantity']);
});
var colors =[ "#FFCE56",
"#FFA75D",
"#46BFBF",
"#5975CB",
"#FF5D5D",
"#FFCC5D",
"#52DF52",
'black'
];
var tickers = [];
$("#positions_chart").data('positions').forEach(function(element){
tickers.push(element['ticker']);
});
var pieData = {
labels: tickers,
datasets: [
{
backgroundColor: [
"#FFCE56",
"#FFA75D",
"#46BFBF",
"#5975CB",
"#FF5D5D",
"#FFCC5D",
"#52DF52",
'black'
],
borderColor: "rgba(220,220,220,1)",
data: quantities
}
]
}
var chartInstance = new Chart(ctx, {
type: 'doughnut',
data: pieData,
options: {
responsive: true
}
});
标记的数量表示有多少对象需要在图表上显示颜色。ChartJS在背景中做的就是在股票中循环分配新的颜色。我面临的问题是,当股票数量颜色数量我希望颜色数组从顶部重置。因此,图表中的新对象没有空白颜色。您可以使用双链接列表切换颜色数组 或者在创建对象时使用匿名函数
datasets: [{backgroundColor: (() => {
let bgcolors = [];
for (let i=0; i < tickers.length; ++i) bgcolors.push(colors[i % colors.length]);
return bgcolors;
})()
}]
数据集:[{backgroundColor:(()=>{
设bgcolors=[];
对于(i=0;i
就是这样。非常感谢。