Question

我要沿y轴绘制这些数据

 Data : {
    0: 146420963625
    1: 147330031125
    2: 148239121125
    3: 149148259875
    4: 150057409875
    5: 150966559875
    6: 151875709875
    7: 152785039875
    8: 153694381125
    9: 154603752375
    10: 155513142375
    11: 156422532375
    12: 157331933625
    13: 158241334875
    14: 159150739875
    15: 160060148625
    16: 1067007000
    17: 1017138000
    18: 967269000
    19: 917449875
    20: 867631125
    21: 818077875
    22: 768526125
    23: 720058125
    24: 671599125
    25: 623639250
    26: 575696625
    27: 531887250
    28: 488085750
    29: 445405125
    }

尝试使用此映射功能，但生成的值不是我需要什么：

const mapNumber = (number, in_min, in_max, out_min, out_max) => {
  return (number - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
};

有人可以帮我弄清楚如何绘制适合画布的值。

Answer 1

您尝试过

CanvasJs？

我在y轴上尝试了10M的值，并且工作正常。你应该这样尝试。

   <!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {

var limit = 50000;
var y = 10000000;    
var data = [];
var dataSeries = { type: "line" };
var dataPoints = [];
for (var i = 0; i < limit; i += 1) {
    y += Math.round(Math.random() * 10 - 5);
    dataPoints.push({
        x: i,
        y: y
    });
}
dataSeries.dataPoints = dataPoints;
data.push(dataSeries);

//Better to construct options first and then pass it as a parameter
var options = {
    zoomEnabled: true,
    animationEnabled: true,
    title: {
        text: "Try Zooming - Panning"
    },
    axisY: {
        includeZero: false,
        lineThickness: 1
    },
    data: data  // random data
};

var chart = new CanvasJS.Chart("chartContainer", options);
var startTime = new Date();
chart.render();
var endTime = new Date();
document.getElementById("timeToRender").innerHTML = "Time to Render: " + (endTime - startTime) + "ms";

}
</script>
<style>
    #timeToRender {
        position:absolute; 
        top: 10px; 
        font-size: 20px; 
        font-weight: bold; 
        background-color: #d85757;
        padding: 0px 4px;
        color: #ffffff;
    }
</style>
</head>
<body>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<span id="timeToRender"></span>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

</body>
</html>

参考：https://canvasjs.com/javascript-charts/performance-demo-chart/ 不用担心您可以插入多少点，CanvasJs可以轻松处理数百万个点。另一个最佳选择是使用ChartJ，它还可以处理数百万个数据点。您可以在这里阅读更多ChartJs how much data can charts js handle

Answer 2

您的数据对象不是正确的JS对象或数组。由于您的键是顺序键，因此将其作为数组而不是对象进行操作会更容易，因此您的数据应如下所示：

var Data = [
  146420963625,
  147330031125,
  148239121125,
  149148259875,
  150057409875,
  150966559875
  //etc
]

然后，您不必直接使用所有这些参数来构建函数，而是可以直接从数据中计算出它们，如下所示：

function mapToCanvas(Data, YScale='100') {   
  var MaxValue = Math.min(...Data);
  var MinValue = Math.max(...Data);
  var Range = MaxValue - MinValue;
  var Coeffecant = YScale / Range;
  return Data.map(x => (x - MinValue) * Coeffecant);
}

使用console.log，您现在可以看到所有值都在0到100范围内。在大多数情况下，您可以将YScale保持在100，并使用百分比进行定位；否则，您可以使YScale元素的高度或宽度，然后这些值可以返回像素位移。这完全取决于您如何构建绘图工具。

console.log(mapToCanvas(Data));
// or
console.log(mapToCanvas(Data, (document.getElementById('myOutputElement').clientHeight)));

如何绘制包含非常大值的数据点

2 个答案: