javascript - 为我的脚本的每一行创建一个阴影

Question

我想根据每行数据通过我的脚本创建一个阴影/类(class)。

我在 Stackoverflow 上找到了一个有用的脚本来创建阴影/类(class)。

这是我的完整代码:

const svg = document.getElementById('root')
let dom = []

const data = []
data.push([1000,2500,5000,10000,150,350,0]) // row 1
data.push([2,0,0,1,8,6,5]) // row 2
data.push([9,10,5,2,0,3,8]) // row 3
data.push([1,2,3,3,2,1,0]) // row 4
data.push([0,1,3,3,7,0,0]) // row 5
data.push([0,1,0,1,0,1,0]) // row 6
data.push([1,10,20,30,10,20,4]) // row 7
data.push([1,5,10,25,20,0,1]) // row 8
data.push([15,8,51,1,2,5,9]) // row 9
data.push([2,8,2,5,7,5,1]) // row 10

const seedColor = '#00cc00'
const rows = data.length
const cols = 7
const margin = 2
const height = 10
const width = 30
const svgHeight = (rows * height) + (rows * margin)

// @see http://stackoverflow.com/questions/5560248/programmatically-lighten-or-darken-a-hex-color-or-rgb-and-blend-colors
_shadeColor2 = (color, percent) => {
  let f = parseInt(`${color}`.slice(1),16),
      t   = percent < 0 ? 0 : 255,
      p   = percent < 0 ? percent * -1 : percent,
      R   = f>>16,
      G   = f>>8&0x00FF,
      B   = f&0x0000FF;
  return "#" + (0x1000000+(Math.round((t-R)*p)+R)*0x10000+(Math.round((t-G)*p)+G)*0x100+(Math.round((t-B)*p)+B)).toString(16).slice(1);
}

for(let r = 0; r < rows; r++) {
    const max = Math.max(...data[r])
  const faktor = 1 / max

  for(let c = 0; c < cols; c++) {
    let shadeBy = data[r][c] * faktor

    let colorRx = /(#(?:[0-9a-f]{2}){2,4}|#[0-9a-f]{3}|(?:rgba?|hsla?)\((?:\d+%?(?:deg|rad|grad|turn)?(?:,|\s)+){2,3}[\s/]*[\d.]+%?\))/i
    color = _shadeColor2(seedColor, shadeBy)

        dom.push('<rect x="'+((width*c)+margin*c)+'" y="'+((height*r)+margin*r)+'" width="30" height="10" fill="'+color+'" ></rect>')
  } 
}

svg.style.height = svgHeight
svg.innerHTML = dom.join('')

这里是一个运行示例:https://jsfiddle.net/0zLotkhu/33/

我的目标是根据每一列的数据为每一行创建一个阴影。我没有找到为什么我的阴影不是真正褪色的错误。

Answer 1

您正在寻找不同深浅的绿色以使其相距更远？我不能说我理解你用来计算百分比的公式——但在我看来，矩形的颜色完全符合需要，但百分比靠得太近了。看看这个例子，我在其中添加了您的百分比(我将小数位数限制为 2)- 您就会明白我的意思。

const svg = document.getElementById('root')
let dom = []

const data = []
data.push([1000,2500,5000,10000,150,350,0]) // row 1
data.push([2,0,0,1,8,6,5]) // row 2
data.push([9,10,5,2,0,3,8]) // row 3
data.push([1,2,3,3,2,1,0]) // row 4
data.push([0,1,3,3,7,0,0]) // row 5
data.push([0,1,0,1,0,1,0]) // row 6
data.push([1,10,20,30,10,20,4]) // row 7
data.push([1,5,10,25,20,0,1]) // row 8
data.push([15,8,51,1,2,5,9]) // row 9
data.push([2,8,2,5,7,5,1]) // row 10

const seedColor = '#00cc00'
const rows = data.length
const cols = 7
const margin = 2
const height = 10
const width = 30
const svgHeight = (rows * height) + (rows * margin)

// @see http://stackoverflow.com/questions/5560248/programmatically-lighten-or-darken-a-hex-color-or-rgb-and-blend-colors
_shadeColor2 = (color, percent) => {
percent = percent.toFixed(2)
console.log('shading '+color+ ' percent '+percent)
 var f=parseInt(color.slice(1),16),t=percent<0?0:255,p=percent<0?percent*-1:percent,R=f>>16,G=f>>8&0x00FF,B=f&0x0000FF;
    return "#"+(0x1000000+(Math.round((t-R)*p)+R)*0x10000+(Math.round((t-G)*p)+G)*0x100+(Math.round((t-B)*p)+B)).toString(16).slice(1);
}

for(let r = 0; r < rows; r++) {
	const max = Math.max(...data[r])
  const faktor = 1 / max

  for(let c = 0; c < cols; c++) {
    let shadeBy = data[r][c] * faktor
    
    let colorRx = /(#(?:[0-9a-f]{2}){2,4}|#[0-9a-f]{3}|(?:rgba?|hsla?)\((?:\d+%?(?:deg|rad|grad|turn)?(?:,|\s)+){2,3}[\s/]*[\d.]+%?\))/i
    color = _shadeColor2(seedColor, shadeBy)

		dom.push('<rect x="'+((width*c)+margin*c)+'" y="'+((height*r)+margin*r)+'" width="30" height="10" fill="'+color+'" ></rect><text x="'+((width*c)+margin*c)+'" y="'+((height*r)+7+margin*r)+'" fill="#000000" font-family="arial" font-size="8" >'+shadeBy.toFixed(2)+'</text>')
  }	
}

svg.style.height = svgHeight
svg.innerHTML = dom.join('')

<svg id="root"></svg>