javascript - 2 var 数组在我更改 arrayToDataTable 输入后神秘地改变(谷歌图表线)

Question

我正在通过 google charts 显示货币汇率的折线图.

基本上我有两种类型的值:

1. 日期(iso8601 格式)
2. 费率(小数)

我正在尝试实现一个函数来更改 arrayToDataTable 的输入:

    dataChart = google.visualization.arrayToDataTable(arrayForChart);

基本上我正在改变两种货币之间基础货币的作用。每次我这样做时折线图都应该反转。

当我按下更改显示按钮一次(“currencyRates_changeDisplay”)时，它会更改图表。他的图是颠倒的，一切正常。但在那之后，图表停留在最后一次更改的值上。并且谷歌图表线不会再改变。

我做了一些调试。

似乎在我按下按钮“#currencyRates_changeDisplay”后，“var arrayForChart”和“var arrayTest”更改为“var arrayChanegeDisplaySettingForChart”的值。之后他们就不再改变了。我认为这是因为这条线:

    dataChart = google.visualization.arrayToDataTable(arrayForChart);

但我不确定。这是我的完整代码:

    <script>

    var arrayForChart;
    var arrayTest;
    var checkkk=0;

    var arrayChanegeDisplaySettingForChart;

    var dataChart;


    var baseCurrencyDisplaySetting=1;     
    var baseCurrency="USD";


    var dayResults;
    var yesterdayResults;


    var fromCurrency;
    var toCurrency;
    var currencyAmount;


    var direction;
    var percent;
    var gainLoss;

    loadRates();

    $(document).ajaxStop(function () {

        if (baseCurrencyDisplaySetting==2){
            arrayChanegeDisplaySettingForChart=arrayForChart;
            arrayChanegeDisplaySettingForChart=changeArrayForChart(arrayChanegeDisplaySettingForChart);
        }
        whenAjaxReallyStops();

    });
    function whenAjaxReallyStops() {

            //alert("AJAX REALLY ENDED");                   
            displayCurrencyConverterResult();
            dipsplayChart();
            displayAllRates();


    }

    function loadRates(){
        baseCurrency   = $("#baseCurrency").val();
        fromCurrency   = $("#currency_from").val();
        toCurrency   = $("#currency_to").val();
        currencyAmount = $("#currency_amount").val();


    $.ajax({
    type: "POST",
    url: "just a url here...",
    data: {
    baseCurrency: baseCurrency,
    toCurrency: toCurrency
            },
    cache: false
        }).done(function(data) {

            resultArray=data;
            dayResults=resultArray["0"];
            yesterdayResults=resultArray["1"];
            console.log(dayResults);
            console.log(yesterdayResults);
            arrayTest=resultArray["arrayForCharts"];
            arrayForChart=resultArray["arrayForCharts"];
            alert ("arrayForChart changed");
            console.log(resultArray);

        });
    }


    function changeArrayForChart(changedArrayForChart){

        console.log(changedArrayForChart);
        for (var key in changedArrayForChart) {     
            if (key != 0){
                let newRateForChart=1*(1 / changedArrayForChart[key][1]);
                changedArrayForChart[key][1]=newRateForChart;
            }
        }
        return changedArrayForChart;    
    }
    function dipsplayChart(){
        //from here google chart stuff
        google.charts.load("current", {packages: ["corechart", "line"]});
        google.charts.setOnLoadCallback(drawLineColors);


        //until here google chart stuff
    }

    function drawLineColors() {
        dataChart=null;
        if (baseCurrencyDisplaySetting==1){
            if (checkkk==0){
                    console.log (JSON.stringify(arrayForChart));
                dataChart = google.visualization.arrayToDataTable(arrayForChart);
            }else{
                    console.log (JSON.stringify(arrayTest));
                dataChart = google.visualization.arrayToDataTable(arrayTest);
            }
            checkkk=checkkk+1;
            var titleChartString = baseCurrency + " vs " + toCurrency + " Last 90 days";
        }else{
                console.log(JSON.stringify(arrayChanegeDisplaySettingForChart));            
dataChart = google.visualization.arrayToDataTable(arrayChanegeDisplaySettingForChart);
            var titleChartString = toCurrency + " vs " + baseCurrency + " Last 90 days";
        }       
        var options = {
    title: titleChartString ,
    explorer: {
    actions: ["dragToZoom", "rightClickToReset"],
    axis: "horizontal",
    keepInBounds: true
            },
    hAxis: {
    title: "Date",
    format: "d MMM",

            },
    vAxis: {
    title: "Rate",
            },
    colors: ["#a52714", "#097138"]
        };
        var chart = new google.visualization.LineChart(document.getElementById("chart_div"));
        chart.draw(dataChart, options);
    }           

    $("body").on( "click", "#currencyRates_changeDisplay", function(){
        if (baseCurrencyDisplaySetting==1){
            baseCurrencyDisplaySetting=2;
            if (typeof arrayChanegeDisplaySettingForChart == "undefined"){
                arrayChanegeDisplaySettingForChart=arrayForChart;
                arrayChanegeDisplaySettingForChart=changeArrayForChart(arrayChanegeDisplaySettingForChart);
            }
        }else{
            baseCurrencyDisplaySetting=1;
        }
        displayAllRates();
        dipsplayChart();
    });                     

    </script>

这里是示例数据:

图表数组:

[[{"label":"Date","id":"Date","type":"date"},{"label":"Rate","id":"Rate","type":"number"}],["Date(2017, 3, 10)",3.6618],["Date(2017, 3, 11)",3.6565]]

然后我按下“currencyRates_changeDisplay”按钮。

我在控制台日志中收到此通知:

[Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive.

arrayChanegeDisplaySettingForChart:

[[{"label":"Date","id":"Date","type":"date"},{"label":"Rate","id":"Rate","type":"number"}],["Date(2017, 3, 10)",0.2730897372876727],["Date(2017, 3, 11)",0.2734855736359907]]

然后我再次按下“currencyRates_changeDisplay”按钮。

数组测试:

[[{"label":"Date","id":"Date","type":"date"},{"label":"Rate","id":"Rate","type":"number"}],["Date(2017, 3, 10)",0.2730897372876727],["Date(2017, 3, 11)",0.2734855736359907]

从这里开始，每次我按下“currencyRates_changeDisplay”按钮时:“arrayTest”和“arrayForChart”都停留在“arrayChanegeDisplaySettingForChart”的值上，图表永远不会改变。

谁知道问题出在哪里？

非常感谢!!

Answer 1

您的代码指示仅在 arrayChanegeDisplaySettingForChart 未定义时调用 changeArrayForChart。因此这只会发生一次，因为在第一次之后，后一个变量不再是未定义的。

所以改变这个:

if (baseCurrencyDisplaySetting==1){
    baseCurrencyDisplaySetting=2;
    if (typeof arrayChanegeDisplaySettingForChart == "undefined"){
        arrayChanegeDisplaySettingForChart=arrayForChart;
        arrayChanegeDisplaySettingForChart=changeArrayForChart(arrayChanegeDisplaySettingForChart);
    }
}else{
    baseCurrencyDisplaySetting=1;
}

收件人:

// For arrays you can just use `!` to test for not being defined:
if (!arrayChanegeDisplaySettingForChart) {
    // This happens only once:
    arrayChanegeDisplaySettingForChart = arrayForChart;
}
// Now toggle. Note that changeArrayForChart mutates the given array
// so you don't need the return value 
changeArrayForChart(arrayChanegeDisplaySettingForChart);
// A way to toggle between 1 and 2:
baseCurrencyDisplaySetting = 3 - baseCurrencyDisplaySetting;