Question

我正在使用Highcharts进行统计，我为选择一年做了一个额外的按钮。这工作正常，但当我点击按钮时，它刷新页面，这不是我想要的。

My Highcharts系列看起来像这样：

series: [{
     name: 'Sales <? echo $year; ?>',
     lineWidth: 4,
     lineColor: '#058DC7',
     color: '#058DC7',
     marker : {
        enabled : true,
        fillColor: '#058DC7',
        radius : 5,
        lineWidth : 2,
        states: {
            hover: {
                radius: 6,
                lineWidth : 2
                }
            }
        },
    states: {
    hover: {
        lineWidth: 5
        }
     },
     data: [<?

        //SELECT FROM DATABASE
        $query = "SELECT SUM(amount) AS amount_total
        FROM invoices 
        WHERE user_id = {$_COOKIE['customer_id']} 
        AND date BETWEEN '{$year}-01-01' AND '{$year}-12-30'
        GROUP BY MONTH(date)";
        $sql = mysql_query("$query"); 
        while ($fill = mysql_fetch_array($sql)) 
        { 
            $amount = $fill['amount'];

            echo $amount.',';
        }

        ?>]

  }

按钮：

    <div class="stats_options" id="yearSelector" style="margin-bottom:10px; width:150px;">Select Year: <span style="color:#058DC7; font-weight:bold;">2008</span></div>
      <div id="yearSelectorOptions" class="option_list" style="width:170px; display:none;">
          <ul>
              <li><a href="?config&year=2009&history=">2009</a></li><li><a href="?config&year=2008&history=">2008</a></li><li><a href="?config&year=2007&history=">2007</a></li><li><a href="?config&year=2006&history=">2006</a></li><li><a href="?config&year=2005&history=">2005</a></li><li><a href="?config&year=2004&history=">2004</a></li><li><a href="?config&year=2003&history=">2003</a></li><li><a href="?config&year=2002&history=">2002</a></li><li><a href="?config&year=2001&history=">2001</a></li><li><a href="?config&year=2000&history=">2000</a></li><li><a href="?config&year=1999&history=">1999</a></li><li><a href="?config&year=1998&history=">1998</a></li>                                
          </ul>
      </div>

所以我想在不刷新te页面的情况下改变年份。

我希望有人可以帮助我朝着正确的方向前进！

Answer 1

正如Bhesh所说，你需要Ajax才能执行更新。我在这里创建了类似的东西：http://danaben.net/t/baseball/scatter.php

查看顶部的脚本，它设置一些图表选项，获取所选年份，然后调用php脚本。 php返回一个json对象，我用它来替换options.series值。你必须根据你的图表定制它，但这应该是正确的方向。

高年级与年度选择器

1 个答案: