2016-04-22 8 views
0

データをJSONとしてHighcharts折れ線グラフに渡しています。複数の線(むしろ曲線)があり、開始点と終了点が異なりますが、それらはすべて一緒にプロットする必要があります。ユーザー入力(ハイチャート、JavaScript、Django)でデータを動的に変換

series = [{'data': [[20, 400], [30, 450]], 'name': 'pc1', 'visible': False}, 
{'data': [[40, 525], [50, 600], [70, 680]], 'name': 'pc2', 'visible': False}, 
{'data': [[80, 700], [90, 980]], 'name': 'pc3', 'visible': False}, etc. 

このデータは、標準的な空気密度を用いて計算されます。そのため、私のシリーズは、このようになります。ここで、「データ」は、彼らは、x、yのペアになるように配置されています。私は、異なる空気密度を入力することができるようにユーザーにして、データをボタンのクリックで使用できるようにしたい(私はsetDataを考えている)。

基本的に、データは風速vs RPMです.X値は風速、Yは対応するRPMです。新しい空気密度の設定を変更することによって、ユーザーは新しいポイントでRPMを見つけるために使用される調整係数を生成します。だから、簡単な例:

Standard Air Density (1.225 kg/m3): 
1 mph 100rpm 
2 mph 250rpm 
3 mph 500rpm 

は、今、私たちは新しい空気密度の調整係数を計算する式adj_factor =(新しい空気密度/ 1.225)^(1/3)と(1.5キロ/㎥を想定) - >この1.07を返します。この要素を使って、風速*調整係数で動力を取り、データを補間するだけで新しいrpmを計算できます。

New Air Density (1.5 kg/m3) 
1 mph, (whatever RPM is @ 1.07mph (1mph*adj factor)) 
2 mph, (whatever RPM is @ 2.14mph (1mph*adj factor)) 
3 mph, (whatever RPM is @ 3.21mph (1mph*adj factor)) 

私はに実行している問題は、私はJSで非常に経験の浅いだとかなりのデータを動的に作成する方法を理解していない、または調整風速古い曲線Yの値を参照する方法ということです。

これを行うには、データを補間する必要があります。これはnumpyを使って行っています。

この変換をJavaScript側から適用する方法はありますか?私のグラフは、フォームの標準HighChartsラインチャートである:

$(document).ready(function() { 
$(chart_id).highcharts({ 
chart: chart, 
title: title, 
credits: credits, 
xAxis: {}, 
yAxis: yAxis, 
legend: legend, 
series: series 

}); 

と私のDjangoのビューでは、私はすべてのパラメータを定義しています:

chart = {"renderTo": chartID, "type": chart_type, "height": chart_height,} 
title = {"text": 'Power Curves'} 
yAxis = {"title": {"text": 'Output (RPM)'}} 
series = json.dumps(series_) 

そして、先に述べた形式のシリーズを。グラフはうまくいきます。データの動的な読み込みと、私が苦労している調整係数の実装です。

おかげ

+0

を使用してhighchartsに新しい値を設定します。 options'](http://api.highcharts.com/highcharts#Series.options)および返されたオブジェクトアクセスデータでは 'options.data'となります。次に、データを変更し、 'Series.setData()'を使ってシリーズに適用します。問題が発生する場合は、ライブデモをご提供ください。 JSFiddleで –

答えて

0

は、JavaScriptでデータの3つの配列を定義し、あなたは[ `シリーズを使用して、一連の現在のデータを得ることができ、ボタンの上に配列内の値を変更する]をクリックしてのsetData