Question

我正在尝试为BTC价格创建一个图表。该应用程序通过api（podatek1）获得价格。我正在使用NodeJS
我想要做的是图表将显示价格的变动并缩放数据以在画布上显示它。价格是每5秒给出的，这就是我使用拼接方法输入新值并从图表中删除最旧值的原因。我无法弄清楚的是如何将图形保留在画布内，因为如果价格大于Zmeja（上边框），则无法看到该点。

我该如何计算最大值和最小值，以便在图表上看到这一点？代码需要自动计算max和min。

Zmeja和Smeja只是画布上下边界的值。

具有预设值的价格图表

价格高于上边框

var canvas;
var ctx;

canvas = document.getElementById("cv");
ctx = canvas.getContext("2d");
ctx.strokeStyle = "#00c3c3";

var x = new Array();
var y = new Array();

x = [0,40,70,100,150,200,250,300,350,400];
y = [50,20,60,40,80,20,70,60,90];

ctx.beginPath();

for (var i=0; i<canvas.width; i++){

ctx.lineTo(x[i], y[i]);
}

function graf(podatek1){

var Zmeja = parseFloat(podatek1)+25; //8100
var Smeja = parseFloat(podatek1)-25; //8050
var max = 9130;
var min = 9080;
var range = max - min;
var yPx = 200; // število px po y osi
var podatekSkaliran1;

podatekSkaliran1 = ((max - podatek1)/range)*yPx;

y.splice(0, 1);
//y[i] = i++;

ctx.clearRect(0, 0, canvas.width, canvas.height);
y[9] = podatekSkaliran1;
ctx.beginPath();

ctx.font = "15px Arial";
ctx.fillText(Zmeja,0,15);
ctx.fillText(Smeja,0,195);

for (var i=0; i<y.length; i++) {
    ctx.lineTo(x[i], y[i]);
}

ctx.stroke();

//var timerVar = setTimeout(zanka, 400);
}

function load() {

ctx.beginPath();

for (var i=0; i<y.length; i++) {
    ctx.lineTo(x[i], y[i]); 
}

ctx.stroke();

//zanka();

}

Answer 1

我认为您正在尝试执行this之类的操作。因此，您应该使用Google图表

而不是将其写在您的上面。

<html>
 <head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses'],
      ['2013',  1000,      400],
      ['2014',  1170,      460],
      ['2015',  660,       1120],
      ['2016',  1030,      540]
    ]);

    var options = {
      title: 'Company Performance',
      hAxis: {title: 'Year',  titleTextStyle: {color: '#333'}},
      vAxis: {minValue: 0}
    };

    var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
</script>
</head>
 <body>
  <div id="chart_div" style="width: 100%; height: 500px;"></div>
</body>
</html>

您可以参考此here

如何自动计算图表的最大值和最小值，以便高值或低值不会丢失？

1 个答案: