0
私はJqueryで新しく、まだ学習しています。私は、データとAJAX呼び出しをレンダリングするためにChart.Jsを使用しています。動的になるようにJavaScriptコードを変更する
ドロップダウンボタンを使ってレーダーチャートを更新するスクリプトを作成しました。目標は次のとおりです。 各ユーザーはチームの一員であり、グラフでレンダリングするデータがいくつかあります。だから私はfixed_arrayを使ってグラフにいくつかの固定データがあり、ユーザーは現在のメンバーをドロップダウンボタンを使ってチーム内の他のメンバーと比較することができます
私はそのコードで静的なデータ動的にする方法を知らない。例えば： 私はフォーム{[data_array] USER_ID}でチーム全体のデータをインポートし、この状況ではIDの整数を返す
{6: [81, 68, 71, 71, 67, -72], 7: [79, 77, 86, 86, 59, -71], 8: [67, 71, 68, 68, 85, -66]}
とCURRENT_USER = data.current_userとCURRENT_USER番号6
私は次のようになり、チャートをテストするために別のファイルに試しをした：
<script type="text/javascript">
$(document).ready(function() {
// Different arrays for the different data
var array = [];
array["raphael"] = [90, 20, 80, 50, 34];
array["fraxool"] = [89, 12, 68, 89, 90];
array["johnny"] = [78, 89, 1, 90, 80];
// Default value
var fixed_array = [20, 12, 78, 50, 90];
// Chart config
var color = Chart.helpers.color;
var config = {
type: 'radar',
data: {
labels: [["label1"], "label2", "label3", "label4", "label5"],
datasets: [{
label: "Bugsy Bug 1",
backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(),
borderColor: window.chartColors.red,
pointBackgroundColor: window.chartColors.red,
data: []
}, {
label: "Bugsy Bug 2",
backgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(),
borderColor: window.chartColors.blue,
pointBackgroundColor: window.chartColors.blue,
data: fixed_array
}]
},
options: {
legend: {
position: 'top',
display: false
},
title: {
display: false,
text: 'Fiverr Chart'
},
scale: {
ticks: {
beginAtZero: true
},
pointLabels: {
fontSize: 10,
lineHeight: 2
}
}
}
};
var mainChart = new Chart(document.getElementById("canvas"), config);
// Event for the select
$(".pick-chart").change(function (e) {
e.preventDefault();
var val = $(this).val();
if (val != 0) {
config.data.datasets[0].data = array[val];
} else {
config.data.datasets[0].data = [];
}
mainChart.update();
});
});
</script>
しかし、私の実際のアプリケーションでは、AJAXを使用して、そのデータを取得している：
$.ajax({
method: "GET",
url: endpoint,
success: function(data){
console.log(data)
//Labels comming from wevsite.views//
info_array = data.info_array
current_user = data.current_user
</script>
今info_arrayの出力は{6: [81, 68, 71, 71, 67, -72], 7: [79, 77, 86, 86, 59, -71], 8: [67, 71, 68, 68, 85, -66]}
よう{USER_ID：[データ]}である：私は任意に適応なる動的データを使用するように適応したい6
とCURRENT_USER出力チームのサイズ
誰かが私にそれを理解するのに役立つでしょうか？
編集したコードのV2：（ので、各オプションの値でUSER_IDは）
<select name="pick-chart" class="pick-chart">
<option value="6">Raphael</option>
...
</select>
あなたが何かにあなたのpick-chart.change機能を書き換えることができます：
<div class="col graph-info">
<div class="card">
<h5 class="card-header text-center bg-dark text-white">Information processing</h5>
<div class="card-body">
<div class="dropdown-container">
<form>
<select id="pick-chart" class="form-control pick-chart">
<option value="0">Compare with</option>
{% for i in team_list_pop %}
<option value="{{i.id}}">{{i.first_name}} {{i.last_name}}</option>
{% endfor %}
</select>
</form>
</div>
<canvas id="info_process"></canvas>
</div>
</div>
<script>
var endpoint = 'api/chart/data'
$.ajax({
method: "GET",
url: endpoint,
success: function(data){
console.log(data)
//Labels comming from wevsite.views//
complete_label = data.complete_label,
processing_information_label = data.processing_information_label,
motivation_label = data.motivation_label,
action_label = data.action_label,
other_data_label = data.other_data_label,
//Data comming from wevsite.views//
team_name_list2 = data.team_name_list2
info_array = data.info_array
current_user = data.current_user
team_list_id = data.team_list_id
fixed_array = info_array[current_user]
function random_color(){
var color = 'rgba(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256))+ ',' + 0.2 + ')';
return color
}
//ctx//
var ctx2 = document.getElementById("info_process").getContext('2d');
//graph 2//
var info_process = new Chart(ctx2,{
type: 'radar',
data: {
labels: processing_information_label,
datasets:[{
data: fixed_array, //processing_information_data,
backgroundColor: random_color()
},
{
backgroundColor: random_color(),
data: []
}]
},
options: {
legend: {
position: 'top',
display: false
},
scale: {
display: true,
ticks: {
beginAtZero: true,
}
},
responsive:true,
maintainAspectRatio: true,
}
});
//end graph 2//
$(".pick-chart").change(function (e) {
e.preventDefault();
var val = $(this).val();
if (val != 0) {
$.ajax({
method: "GET",
url: endpoint,
success: function(data){
console.log(data)
//Labels coming from website.views//
info_array = data.info_array
current_user = data.current_user
config.data.datasets[0].data = info_array[val];
config.data.datasets[1].data = info_array[current_user];
mainChart.update();
}
});
} else {
config.data.datasets[0].data = [];
}
mainChart.update();
});
}
})
</script>
この動的データがどこにあるかはわかりませんあなたはそれについて何のコードを使っているのですか？ – rolfv1
@ rolfv1こんにちは、あなたは正しいです、私はAjaxを使ってDjango RESTフレームワークを使用するviews.pyファイルからデータを取得しています：var endpoint = 'api/chart/data' $ .ajax { 方法： "GET"、 URL：エンドポイント、 成功：関数（データ）{ にconsole.log（データ） info_array = data.info_array CURRENT_USER =データ。current_user ここで、info_arrayは{user_id：[data]}の形式のデータで、現在のユーザーは現在のユーザーのIDです – Ben2pop
質問を編集/更新し、関連するすべてのソースコードを含めて、AJAX応答。 – NewToJS