Question

我是Jquery的新手，还在学习。我正在使用Chart.Js来呈现数据和AJAX调用。

我创建了一个使用下拉按钮更新雷达图表的脚本。我们的目标是：每个用户都是团队的一部分，并且有一些我在图表中呈现的数据。所以我使用fixed_array在图表上有一些固定数据然后用户可以使用下拉按钮将当前成员与团队中的其他成员进行比较

我设法使用该代码的静态数据，但我不知道如何使其动态化。我以{user_id：[data_array]}的形式导入了整个团队数据，例如：

{6: [81, 68, 71, 71, 67, -72], 7: [79, 77, 86, 86, 59, -71], 8: [67, 71, 68, 68, 85, -66]}

和current_user id with current_user = data.current_user在这种情况下返回ID的整数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：[data]}

和current_user输出：6 我想调整它以使用适应任何规模的团队的动态数据

有人可以帮我搞清楚吗？

编辑的代码V2：

<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>

Answer 1

如果您将下拉框格式化为:(因此每个选项的值中的user_id）

<select name="pick-chart" class="pick-chart">
    <option value="6">Raphael</option>
    ...
</select>

您可以将pick-chart.change函数重写为：

$(".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();
});

假设您的数据确实是动态的，并且可能会在用户停留在您的网页时发生变化。还假设您要将数据集1中的current_user（也应该是user_id）（如固定数据）与数据集0中的选定其他用户进行比较。

使JavaScript代码适应动态

1 个答案: