如何计算占总数的相对百分比？

Question

我正在尝试创建一个字云，其字体大小基于总数的百分比。每个单词都有一个“计数”属性。<h2>Cryptos</h2><div class="topics">{#each cryptos as topic}    <a    href="/cryptos/{topic._id}"    style="font-size: {(topic.count / topics[0].count) * 100 + 100}%;">${topic._id}    ({topic.count})</a>{/each}</div>这不太正常工作，我不知道为什么。font-size: {(topic.count / topics[0].count) * 100 + 100}%;主题按照降序排列.count我基本上希望字体大小在低端为 100%，在高端为 200%。

Answer 1

通过将字体大小范围与字数范围进行比较，可以改变字体大小。

想象一下您有一个单词列表及其计数：

const words = [

  { text: "apples", count: 10 },

  { text: "pears", count: 30 },

  // ...

]

的范围font-size可以计算：

const minFontSize = 10

const maxFontSize = 30

// delta between sizes

const fontRange = maxFontSize - minFontSize

然后计算最小字数、最大字数和字数范围。响应式语句对此很有效：

// list of counts

$: counts = words.map(record => record.count)

// minimum word count

$: min = Math.min(...counts)

// maximum word count

$: max = Math.max(...counts)

// delta between smallest and largest word count

$: countRange = max - min

现在我们可以计算字体大小：

minFontSize + (deltaWordCount * sizeRatio)

或者更具体地说：

{#each words as word}

  <span style="font-size: {minFontSize + ((word.count - min) * (fontRange / countRange))}px">

    {word.text}

  </span>

{/each}