Создание гистограммы в Javascript из журнала консоли? - PullRequest
Новая
       6

Создание гистограммы в Javascript из журнала консоли?

0 голосов
/ 04 августа 2020

В настоящее время я пытаюсь построить гистограмму из журнала консоли. Мой код запускает симуляцию Монте-Карло из 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}}

Однако мне нужно, чтобы отображалось в гистограмме с автоматическими ячейками c. Я бы поделился кодом, который пробовал, но не знаю, с чего начать. Приветствуются любые указатели.

.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')

1 Ответ

1 голос
/ 04 августа 2020

Это похоже на то, что вы хотите? 

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 для ящиков ... 1 в var step=(max-min+1)/columns; может быть чем угодно меньшим, что не теряется в точности и не портит данные - даже 0,0000000001 хорошо. Это значит, что максимум не будет помещен в дополнительную корзину и сам по себе. Начиная с var bmax и далее: для отображения (делайте то, что считаете нужным).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...