基于 Ajax 选择调用更改图表数据答案

【问题标题】：Change chart data based on Ajax Selection Call基于 Ajax 选择调用更改图表数据
【发布时间】：2017-10-23 08:21:38
【问题描述】：

我有一个带有年份选择选项的图表，默认情况下，选择选项将选择最新的年份，但用户可以通过此选择选项选择查看另一个年份的其他数据

<script type="text/javascript">
$(document).ready(function() {
  $('table.highchart').highchartTable();
  $('.btnTahun').click(function() {
    $coba = $('#Year').val();
    $.ajax({
            type: 'POST',
            url: "<?php echo site_url('dashboard/list_data/')?>",
            data: {'tahun':$coba},
            success: function(data) {
                $("#tableChart").html(data);
            }
        });
  });
});
</script>

问题是当我选择另一个年份时，以前选择的年份仍然存在于我的视图中，我想让我的视图中只显示选定的年份，看看我下面的图片，你可以看到我选择了 2016 年，但是 2017 年的数据图表仍然显示在我的视图中，我不希望这样，我的 Ajax 有什么问题？或者可能是因为我的控制器或模型？

显示图表的My Html结构如下所示

<table id="tableChart" class="highchart" data-graph-container-before="1" data-graph-type="column">
<thead style="display: none">
    <tr>
        <th>Month</th>
        <th>Category Project</th>
    </tr>
 </thead>
 <tbody style="display: none">
    <tr>
        <td>Jan</td>
        <td><?php echo $januari ?></td>
    </tr>
    <tr>
        <td>Feb</td>
        <td><?php echo $februari ?></td>
    </tr>
    <tr>
        <td>Mar</td>
        <td><?php echo $maret ?></td>
    </tr>
    <tr>
        <td>Apr</td>
        <td><?php echo $april ?></td>
    </tr>
    <tr>
        <td>May</td>
        <td><?php echo $mei ?></td>
    </tr>
    <tr>
        <td>June</td>
        <td><?php echo $juni ?></td>
    </tr>
    <tr>
        <td>July</td>
        <td><?php echo $juli ?></td>
    </tr>
    <tr>
        <td>Aug</td>
        <td><?php echo $agustus ?></td>
    </tr>
    <tr>
        <td>Sep</td>
        <td><?php echo $september ?></td>
    </tr>
    <tr>
        <td>Oct</td>
        <td><?php echo $oktober ?></td>
    </tr>
    <tr>
        <td>Nov</td>
        <td><?php echo $november ?></td>
    </tr>
    <tr>
        <td>Dec</td>
        <td><?php echo $desember ?></td>
    </tr>
</tbody>

【问题讨论】：

你能用html展示你的结构吗？特别是#tableChart 的位置
@Riyenz ok 让我更新我的问题
@Riyenz 你可以再检查一下我的问题，我已经编辑过了
假设默认值为 2017，而您选择了 2016。如果您再次选择其他值，例如 2017 或 2015，会发生什么情况？
@Riyenz 它将在我的视图中添加另一个图表数据，例如如果我从选择选项中选择 2 年，那么将有 3 个图表数据2017（默认），2016（第一个选择） , 2015(第二选)

标签： javascript php jquery ajax codeigniter

【解决方案1】：

您可以使用表单提交而不是 ajax，因为您的控制器函数在您调用它时会创建另一个视图。这是表单助手的链接https://www.codeigniter.com/userguide3/helpers/form_helper.html

控制器

public function list_data(){
    $this->load->helper('form');
    $thn = $this->input->post('tahun');
    $data['januari'] = $this->dashboard_m->get_kategori_totals('01',$thn)->num_rows();
    $data['februari'] = $this->dashboard_m->get_kategori_totals('02',$thn)->num_rows();
    $data['maret'] = $this->dashboard_m->get_kategori_totals('03',$thn)->num_rows();
    //And the code above will be the same until december, the differences only in the parameter

    $data['title'] = 'Aplikasi Saranabudi';
    $data['aktif']  = 'Jumlah Kategori Project';
    $data['judul_hal']= 'Dashboard Kategori Project';
    $this->load->view('dashboard/kategori_project/list_data',$data);
}

查看

$attributes = array('id' => 'myID', 'name' => 'myName', 'class' => 'myClass', 'method' => 'post');
echo form_open('', $attributes);
$options = array(
    '2015'  => '2015',
    '2016'  => '2016',
    '2017'  => '2017',
    '2018'  => '2018',
);
echo form_dropdown('tahun', $options);
// THE CHART
echo form_submit(array('id' => 'filter_button', 'name' => 'filter_button'), 'Filter');
echo form_close();

【讨论】：