在three 3d饼状图渲染的时候,如果数据太大会导致饼状图渲染变形,这时候我们需要对数据进行处理,让数据处在某个范围内
let data = [
{
value: 1225,
name: "标准护理",
color1: '#016fec',
color2: '#0052da',
},
{
value: 1000,
name: "中度护理",
color1: '#2ed9ff',
color2: '#00cdd7',
},
{
value: 1100,
name: "重度护理",
color1: '#ffa821',
color2: '#ffd587',
},
{
value: 1000,
name: "其他护理",
color1: '#ffdd4e',
color2: '#fff079',
},
];
如果您想将data
数组中的value
字段同比例缩小,使其最大值为10,您可以首先找到数组中的最大值,然后计算缩放因子,并使用该因子来缩放每个value
。
以下是如何实现的:
// 获取数组中的最大值
let maxValue = Math.max(...data.map(item => item.value));
// 计算缩放因子
let scale = 10 / maxValue;
// 使用缩放因子来缩放每个value
data.forEach(item => {
item.value = item.value * scale;
});
console.log(data);
此代码将首先找到data
数组中的最大值,然后计算必要的缩放因子,最后使用该因子来缩放每个value
,从而确保最大值为10。
我们将处理后的数据传值给3d饼状图,就可以保证饼状图不会因为数据值太大而导致饼状图变形了。