javascript - 如何添加自定义日期范围以显示 fusionchart?

标签 javascript php datepicker fusioncharts

我在 php 中制作了一个折线图,我想添加自定义日期,在其中选择开始日期和结束日期以及根据该日期显示的图表,我该怎么做? 这是我的代码:

 <?php
 $title='Product Management';
 include("merchantheader.php");
 include("DBConn.php");
 include("FusionCharts.php");
 $link = connectToDB();
 $strQuery="select Distinct DATE_FORMAT(transactions.transaction_date,'%c-%d-%Y') as transaction_date,sum(amount)as Amount from transactions group by  DATE_FORMAT(transactions.transaction_date,'%c-%d-%Y')";
    $result = mysql_query($strQuery) or die(mysql_error());
    $strXML = "<chart caption='Reports of transactions' showValues='0' useRoundEdges='1' palette='3'>";
    while($ors = mysql_fetch_assoc($result)){
    //Generate <set label='..' value='..' />
    $strXML .= "<set label='" .$ors['transaction_date'] ."' value='" . $ors['Amount'] ."' />";
    }
    //free the result set
    //mysql_free_result($result);
    //mysql_close($link);
    //Finally, close <chart> element
    $strXML .= "</chart>";

    //date_default_timezone_set($_SESSION['timezone']);
?>
<?php /*?><textarea ><?php print_r($strXML); ?></textarea><?php */?>    
    <!-- Include FusionCharts.js to provide client-side interactivity -->
    <script type="text/javascript" src="<?=MURL?>/Charts/FusionCharts.js"></script>  
    <link href="<?=MURL?>/assets/ui/css/style.css" rel="stylesheet" type="text/css" /> 
    <script type="text/javascript" src="<?=MURL?>/assets/ui/js/jquery.min.js"></script>
<script type="text/javascript" src="<?=MURL?>/assets/ui/js/lib.js">  </script>     
   <link rel="Stylesheet" type="text/css" href="<?=MURL?>/css/jpicker-1.1.6.min.css" />
<link rel="Stylesheet" type="text/css" href="<?=MURL?>/css/jPicker.css" />
<script src="<?=MURL?>/js/jpicker-1.1.6.min.js" type="text/javascript"></script>
  <div id="chartContainer">
 <?php
 FC_SetRenderer('javascript');
 echo renderChart('Charts/Line.swf', // Path to chart type
                '',         // Empty string when using Data String Method
                $strXML,    // Variable that contains XML string
                'Tracking', // Unique chart ID
                '850', '400', // Width and height in pixels
                false,      // Disable debug mode
                true        // Enable 'Register with JavaScript' (Recommended)
            );

?>

我想制作自定义日期范围,如下图所示:

enter image description here

最佳答案

如果您愿意显示某些数据点而不是所有数据点的日期,您可以将“labelStep”属性设置为 XML 数据的图表元素中的某个值“n”,通过该值您可以选择显示每第 n 个标签。

但是,根据您的屏幕截图,第三个标签“Nov”不会以“n”倍数的固定间隔出现。因此,对于这种情况,您需要以编程方式设置一个条件,并将元素中的“showLabel”属性设置为“1”,同时生成图表 XML 字符串。

关于javascript - 如何添加自定义日期范围以显示 fusionchart?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21377308/

相关文章:

javascript - 不使用 for 循环检查对象数组中是否存在值

javascript - Backbone 尝试使用 put 而不是 post

php - Laravel Homestead 中 PHP 错误日志的位置

javascript - Shield UI 日期选择器,将所选值格式化为 dd/MM/yyyy

javascript - Air Datepicker 内联 javascript,用于启用距 newDate 15 天的日期

javascript - 完全删除 CSS 属性

javascript - 如何通过javascript函数的返回值生成href链接的内容?

php - 在 Html Forms 的 sql 表中记录信息时遇到问题

php - 如何将此数据列表压缩到一个字段中?

javascript - 点击下个月后 jQuery Datepicker 打开两次(使用 2 Datepickers)