как динамически c моя диаграмма js диаграмма на основе выбранного ввода - PullRequest
Новая
       8

как динамически c моя диаграмма js диаграмма на основе выбранного ввода

0 голосов
/ 19 июня 2020

Итак, это мой JavaScript код с моей панели инструментов, который использовался для получения данных диаграммы и обновления диаграммы. Способ работы заключается в том, что из функции select_table она выберет тип диаграммы, которую он хочет показать, и отправит ее в Функция updateData и функция updatedata будут обновлять эти данные каждые 5 секунд, я знаю, что проблема в том, что они отправляют только одни данные на запрос, если я хочу отправить данные снова, мне нужно снова щелкнуть select_table, но это не так, как я хочу потому что я хочу сделать свою диаграмму динамической c, я так запутался прямо сейчас, может кто-нибудь дать мне несколько советов, как это исправить? 

function addData(data) {
            if(data){
                xAccelChartInstance.data.labels.push(new Date());
                xAccelChartInstance.data.datasets.forEach((dataset) =>{dataset.data.push(data['ftx'])});
                if(updateCount > numberElements){
                    xAccelChartInstance.data.labels.shift();
                    xAccelChartInstance.data.datasets[0].data.shift();
                }
                else updateCount++;
                    xAccelChartInstance.update();
            }
            };

            function updateData(data) {
                console.log("Update Data");
                console.log(d);
                $.ajax({
                    method: "GET",
                    url: "dashboard",
                    data:{"data":data},
                    success:function(data){
                        if((data.frx == "0" ) && (data.ftx == "0")){
                            console.log("nope still zero");
                        }else{
                            console.log(data);
                            addData(data);
                            setTimeout(updateData,updateInterval);
                            }
                    }
                });
            }

            function select_table(){
                $('#option-interface').hide();
                $('#option-penghasilan').hide();
                console.log("select-table");
                $("#option-charts").change(function(){
                var charts = $(this).children("option:selected").val();
                console.log(charts);
                if (charts == "interface") {
                    $('#option-interface').show();
                    $('#option-penghasilan').hide();
                    $('#option-interface').change(function(){
                        var chart_value_interface = $(this).val();
                        updateData(chart_value_interface);
                    })
                }else if (charts == "penghasilan" ){
                    $('#option-penghasilan').show();
                    $('#option-interface').hide();
                    $('#option-penghasilan').change(function(){
                        var  chart_value = $(this).val();
                        updateData(chart_value);
                    })
                }else{
                    $('#option-interface').hide();
                    $('#option-penghasilan').hide();
                }
            });

           }
        select_table();
        }
...