【问题标题】:How to convert numbers properly into polyline points如何将数字正确转换为折线点
【发布时间】:2019-02-24 15:37:26
【问题描述】:

我需要在折线点中填写数据,问题是我代表每个数据集的数据不应该在120以上。

如果我有这些数字

5000 5320 5400 5100 4950 4850

我需要将它们放入折线点中,最大应为 120,最小应为 0。 我该怎么做,我想了不同的方法来做到这一点,如下所示:

$total = "The Total Value Of All Datasets"
$row['value'] = "The Value Of The Current Dataset";

$point = ceil (($row['value'] / $total) * 1200); 

上面的例子将呈现非常接近的数字,这并不理想,因为我需要最大的数字来表示 120,最小的数字是 0,而其他数字则介于两者之间。

SVG 和折线的静态示例

    <svg viewBox="0 0 500 100" class="mktcap_spark">
    <polyline
        fill="none"
        stroke="#e9be3d"
        stroke-width="8"
        points="
        00,120
        20,60
        40,120
        60,10
        80,80
        100,80
        120,60
        140,100
        160,90
        180,80
        200, 110
        220, 10
        240, 70
        260, 100
        280, 100
        300, 40
        320, 0
        340, 100
        360, 100
        380, 120
        400, 60
        420, 70
        440, 80
        460, 20
        480, 50
        500, 30
        "
        />

    </svg>

渲染这个

【问题讨论】:

  • 搜索数据,找到最低和最高的数字,并相应地进行缩放。或者更好的是,只需使用转换并保留数字。
  • @RobertLongson 转换?
  • 什么是折线?您是指使用多项式或样条进行分段拟合吗?您是指使用您选择的假设多项式阶数进行最小二乘拟合吗?这些是 (x, y) 点对吗?你的问题我不清楚。
  • @duffymo 折线是 HTML 元素 :)

标签: html math svg polyline


【解决方案1】:

找到最小值和最大值$xMin, $xMax,然后使用线性映射

$newX = 120 * ($X - $xMin) / ($xMax - $xMin)

【讨论】:

  • 谢谢,这很好用,正在研究线性映射
  • 必须重新排列一些变量才能获得正确的视觉效果 $newX = ceil(120 * ($X - $h) / ($l - $h));
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-02-04
  • 2020-06-16
  • 2021-11-11
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多