Заполните Google Charts после Ajax Success динамическими данными

Следующий оператор добавляет значение к элементу с идентификатором response

$('#response').append(total);

. Это делает его похожим на то, что вы объединяете строки, но вы не являетесь, вы на самом деле добавив их к элементу

, измените это на

$('#response').text(total);

Вам нужно изменить событие drop, чтобы оно заменило значение элемента на общее число, вам также необходимо сохранить отслеживать, что такое сумма, я предлагаю что-то вроде следующего

$(function() {
    var data = [];
    var total = 0;

    $( "#draggable1" ).draggable();
    $( "#draggable2" ).draggable();
    $( "#draggable3" ).draggable();

    $("#droppable_box").droppable({
        drop: function(event, ui) {
        var currentId = $(ui.draggable).attr('id');
        data.push($(ui.draggable).attr('id'));

        if(currentId == "draggable1"){
            var myInt1 = parseFloat($('#MealplanCalsPerServing1').val());
        }
        if(currentId == "draggable2"){
            var myInt2 = parseFloat($('#MealplanCalsPerServing2').val());
        }
        if(currentId == "draggable3"){
            var myInt3 = parseFloat($('#MealplanCalsPerServing3').val());
        }
        if ( typeof myInt1 === 'undefined' || !myInt1 ) {
            myInt1 = parseInt(0);
        }
        if ( typeof myInt2 === 'undefined' || !myInt2){
            myInt2 = parseInt(0);
        }
        if ( typeof myInt3 === 'undefined' || !myInt3){
        myInt3 = parseInt(0);
        }
        total += parseFloat(myInt1 + myInt2 + myInt3);
        $('#response').text(total);
        }
    });

    $('#myId').click(function(event) {
        $.post("process.php", ({ id: data }), function(return_data, status) {
            alert(data);
            //alert(total);
        });
    });
});

. Я перенесла оператор var total = 0; из события перетаскивания и изменила статус назначения из этого

total = parseFloat(myInt1 + myInt2 + myInt3);

к этому

total += parseFloat(myInt1 + myInt2 + myInt3);

Вот рабочий пример http://jsfiddle.net/axrwkr/RCzGn/

4
задан Anup Gupta 17 January 2019 в 11:05
поделиться

1 ответ

Во-первых, вы используете старую версию Google Chart.
jsapi больше не должен использоваться, см. обновление кода загрузчика библиотеки .

нужно использовать следующую библиотеку вместо ...

<script src="https://www.gstatic.com/charts/loader.js"></script>

это только изменит оператор load.


и, говоря об операторе load,
будет ждать загрузки страницы по умолчанию,
, чтобы вы могли использовать ее вместо. ..

$( window ).on( "load"... и $(document).ready и т. Д.

рекомендуют настройку, аналогичную следующей ...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var options = {
    height: 350,
    legend: {
      position: 'bottom'
    },
    hAxis: {
      title: 'Years'
    },
    vAxis: {
      title: 'Property Value'
    },
    backgroundColor: '#f1f8e9'
  };

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

  $.ajax({
    url: url,
    headers: {
      'X-CSRF-TOKEN': '{{csrf_token()}}'
    },
    type: "POST",
    data: {
      'annual_capital_growth':annual_capital_growth,
      'property': property,
      'forcast_period': forcast_period,
    },
    context: this
  }).done(function (response, status, jqXHR) {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Years');
    data.addColumn('number', 'Property Name');
    data.addColumn('number', 'Compute Times');
    data.addColumn('number', 'Compute Times2');
    data.addRows(response.graphArray);

    function resize() {
      chart.draw(data, options);
    }
    resize();
    $(window).resize(resize);
  }).fail(function (jqXHR, status, errorThrown) {
    console.log(errorThrown);
  });
});
0
ответ дан WhiteHat 17 January 2019 в 11:05
поделиться
Другие вопросы по тегам:

Похожие вопросы: