Как перерисовать apexcharts, если я изменил значение текста? - PullRequest
Новая
       17

Как перерисовать apexcharts, если я изменил значение текста?

0 голосов
/ 17 октября 2019

У меня есть данные ответа от URL, и я хочу ввести эти данные в Apexcharts. пока все шло гладко, тогда у меня есть проблема, когда необходимо сделать / перерисовать верхние диаграммы, если поле претерпевает изменения. Как вы это решаете? Это мой код

HTML 

<div class="form-group">
  <label>Jenis</label>
  <select class="form-control" id="chart2_type">
    <option value="kec">Perkecamatan</option>
    <option value="kel">Perkelurahan</option>
    <option value="all">Keselurahan</option>
  </select>
</div>
<div class="form-group">
  <label>Tahun</label>
  <select class="form-control" id="chart2_tahun">
  <?php for($tahunchart2 = date('2010'); $tahunchart2 <= date('Y'); $tahunchart2++){ ?>
     <option value="<?php echo $tahunchart2; ?>" <?php if ($tahunchart2 == date("Y")) {echo "selected";} ?>><?php echo $tahunchart2; ?></option>
     <?php } ?>
  </select>
</div>
<button type="button" class="btn btn-brand" id="chart2_ok">Simpan</button>

КОД JAVASCRIPT 

<script type = "text/javascript" >
    // Grafik 1 Total Biaya PBB
    var tahun2 = $('#chart2_tahun').val();
    var type2 = $('#chart2_type').val();
    getChart2(tahun2, type2);

    $('#chart2_ok').on('click', function(event) {
        event.preventDefault();
        var tahun2 = $('#chart2_tahun').val();
        var type2 = $('#chart2_type').val();

        getChart2(tahun2, type2);
    });

    function getChart2(tahun2, type2){
        var label = [];
        var data_sudah_bayar = [];
        var data_belum_bayar = [];
        $.ajax({
            url: '<?php echo base_url(); ?>Request/chart2',
            type: 'POST',
            dataType: 'JSON',
            data: {tahun : tahun2 , type : type2},
            async:false,
        })
        .done(function(data) {
            $.each(data, function(index, val) {
                label.push(val.label);
                data_sudah_bayar.push(parseInt(val.sudah_bayar));
                data_belum_bayar.push(parseInt(val.belum_bayar));
            });
        })
        .fail(function() {
            console.log("error");
        })
        .always(function() {
            console.log("complete");
        });

        var el = document.querySelector("#chart2");
        var chart = new ApexCharts(el, {
            chart: {
                height: 200,
                type: 'bar',
                toolbar: {
                    show: false,
                }
            },
            plotOptions: {
                bar: {
                    horizontal: false,
                    columnWidth: '55%',
                    endingShape: 'rounded'  
                },
            },
            dataLabels: {
                enabled: false
            },
            series: [{
                name: 'Sudah Dibayarkan',
                data: data_sudah_bayar
            }, {
                name: 'Belum Dibayarkan',
                data: data_belum_bayar
            }],
            xaxis: {
                categories: label,
                type: 'category',
                position: 'bottom',
                labels: {
                    show: false,
                },                
            },
            stroke: {
                show: true,
                width: 2,
                colors: ['transparent']
            },
            fill: {
                opacity: 1

            },
            tooltip: {
                y: {
                    formatter: function (val) {
                        return rupiah(val) 
                    }
                }
            }
        });
        chart.render();
    }
</script>

Я успешно отобразил диаграмму при первой загрузке, но если я изменил значение ввода, диаграммане перерисовывать. пожалуйста, помогите мне решить эту проблему

...