时间戳

首页 > 解决方案 > 从控制台日志中用 Javascript 构建直方图？

javascript - 从控制台日志中用 Javascript 构建直方图？

问题描述

目前，我正在尝试从控制台日志构建直方图。我的代码从 python 运行蒙特卡罗模拟，然后将响应放在我的控制台日志中：

{"0":{"0":389.2178300203,"1":591.4980424932,"2":584.0922861547,"3":471.9421922207,"4":430.5213182923,"5":526.1469857263,"6":531.5175215401,"7":497.1429021659,"8":551.4647477237,"9":545.3555861794,"10":411.1320533715,"11":427.7104707958,"12":459.2721293924,"13":483.5658397368,"14":597.1244058697,"15":523.3398658352,"16":362.5170321298,"17":520.381463602,"18":465.4032638462,"19":470.3475641965,"20":406.7402872514,"21":486.4639869547,"22":520.9658084275,"23":432.9272641038,"24":565.2488698868,"25":449.7356072279,"26":491.3449474822,"27":506.7322791391,"28":508.025288958,"29":516.9056795442,"30":481.4799989634,"31":488.3394455437,"32":413.9711742892,"33":477.5617101448,"34":431.5053865622,"35":427.0182654643,"36":500.1590910049,"37":313.8236157921,"38":494.5482740095,"39":381.6418796563,"40":411.3092776285,"41":495.7899381199,"42":439.2846900653,"43":455.1541931171,"44":608.3275080238,"45":538.3187694851,"46":613.3894757483,"47":418.0413029446,"48":545.2035334589,"49":571.2757189704,"50":374.574042587,"51":519.2228570887,"52":432.9313140649,"53":593.0506013779,"54":496.8784082412,"55":412.8469374822,"56":494.6291151757,"57":519.6619044015,"58":433.6658106798,"59":453.2795296341,"60":517.8286634164,"61":419.0930777734,"62":444.8110731574,"63":497.2152332859,"64":486.0879100445,"65":451.18331681,"66":513.478122945,"67":376.8427571886,"68":429.614388555,"69":492.9349714536,"70":527.72940438,"71":432.5618474378,"72":457.7592509259,"73":419.4470570736,"74":505.3245188626,"75":442.4671142028,"76":392.3863368417,"77":468.9160050384,"78":544.5395033971,"79":503.3158464192,"80":452.8164804823,"81":448.6945999861,"82":437.0293855445,"83":465.1955964701,"84":496.2208141858,"85":515.4158004948,"86":470.9172828049,"87":543.1257320113,"88":545.0367695672,"89":457.4450735041,"90":466.9666129362,"91":485.0779682882,"92":512.6378157105,"93":485.911242366,"94":610.2242922672,"95":519.0546318959,"96":600.5305290455,"97":527.128936844,"98":407.2107181954,"99":415.906707778}}

但是，我需要在直方图中显示自动分档。我会分享我尝试过的代码，但是，我什至不知道从哪里开始。任何指针将不胜感激。

.py 文件

df = p.chartDF("AAPL", timeframe='1y', date=None, token='pk_6925213461cb489b8c04a632e18c25dd', version='stable', filter='')
    
def MonteCarlo(dataframe ,t_intervals, iterations):
    simData = df['changePercent']*0.01
    stdev = simData.std()
    var = simData.var()
    u = simData.mean()

    drift = u - (0.5*var)

    Z = stats.norm.ppf(np.random.rand(t_intervals, iterations))
    daily_returns = np.exp(drift + stdev * Z)
    lastPrice = df['close'].iloc[-1]
    price_list = np.zeros_like(daily_returns)
    price_list[0] = lastPrice

    for t in range(1, t_intervals):
        price_list[t] = price_list[t-1] * daily_returns[t]
    return price_list[-1]

def testing():
    dataframe = pd.DataFrame(MonteCarlo(df, 30, 100))
    return dataframe.to_json()

.html 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>testing</title>
    <div id='demo'></div>

</head>
<body>
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<script type="text/javascript">
  var histo = $(document).ready(function(){
      var api_url = '/test'
       $.ajax({
        url: api_url,
        contentType: "application/json",
        dataType: 'json',
        success: function(result){
            console.log(result);
            $("body").append(result);
        }
       })
  });
  var i=0;
</script>
</body>
</html>

视图文件

def test(requests):
    return JsonResponse(monteCarlo.testing(), safe=False)

def fiverr_demo(requests):
    return render(requests, 'meat/fiverr_demo.html')

标签： javascripthtmlstatistics

解决方案

这是你想要的吗？

var values=[];
for(var value in obj[0]) values.push(obj[0][value]);
var min=values.reduce((min, val)=>Math.min(min,val),Infinity);
var max=values.reduce((max, val)=>Math.max(max,val),-Infinity);
var dif=max-min;
var columns=20; // set to your needs (minimum: 1)
var step=(max-min+1)/columns;
var buckets=[];
for(var i=0; i<columns; i++) buckets.push(0);
for(var i=0; i<values.length; i++) {
  buckets[Math.floor((values[i]-min)/step)]++;
}
var bmax=buckets.reduce((max, val)=>Math.max(max,val),-Infinity);
var width=400/bmax;
var height=400/columns;
for(var i=0; i<buckets.length; i++) {
  div=document.createElement("div");
  div.style.border=("1px solid "+((i%2==0)?"blue":"red"));
  div.style.width=width*buckets[i];
  div.style.height=height;
  document.body.append(div);
}

obj是你引用的。
不适用于片段，但适用于 Chrome。 在此处输入图像描述

从 obj 创建了一个值数组。
columns是你想要多少个垃圾箱（1 个或更多）。
我用过buckets垃圾箱... in可以是任何更小
的东西，不会丢失精度，也不会弄乱数据——即使 0.0000000001 也很好。这样最大值就不会单独放置在额外的垃圾箱中。 From and on：用于展示（做你认为更好的事情）。1var step=(max-min+1)/columns;
var bmax

推荐阅读