0

我正在寻找一个网站，它有一个页面，上面有一些由 MySQL 查询驱动的 jChartFX 图表。查询由在主页上的下拉列表中选择的日期驱动。

我正在努力正确地构建代码（所有这些都是完全自学的，所以充满了糟糕的实践！），以便在选择不同的选项时图表会更新。

下面列出了代码，但是我的问题是；代码应该放在哪里绘制图表才能完成这项工作。函数 loadChart 是否应该存在于主页上并从另一个页面的查询中回显数据，或者我应该将整个函数放在由 jquery 加载的单独页面上，还是选项 3 - 我完全不知道标记？

图表的代码是；<> echo $data 是回显 MySQL 输出的部分，当代码和 SQL 查询被修复时可以正常工作。

<script>
    var chart1;
    function loadChart()
      {        
           chart1 = new cfx.Chart();
            chart1.getData().setSeries(1);
                chart1.getAxisY().setMin(100);
                chart1.getAxisY().setMax(1000);
                var series1 = chart1.getSeries().getItem(0);                     series1.setGallery(cfx.Gallery.Lines);

            var data = <?php echo json_encode($temp, JSON_NUMERIC_CHECK); ?>;
                chart1.setDataSource(data);
                var divHolder = document.getElementById('ChartDiv');
            chart1.create(divHolder);            
         }
</script>

SQL 查询是

SELECT COUNT(`column_Date`) AS 'Count' FROM Dates WHERE `column_Date` > date('2013-06-01')

注意：如果日期在 2013-06-01 以上，我希望根据主页的下拉菜单更改此日期。

    <head>
    <script src="js/jquery-1.7.1.min.js"></script> 
    <script>
        $(document).ready(function(){
            $("#optionschosenid").click(function(){
                if($("#optionsid").val() == "OptionA" ){
                    $("#chart").load("weeks.php");
                }
                else {
                    $("#chart").load("text_test.php");
                }

            });
        });
 </script>
</head>
<body onload="loadChart()">
<div id="row">
    <form method="post" id="weekcommencing" name="dateselector">
        <select id="optionsid" name="optionsname">
            <option value="2013-06-01">June</option>
            <option value="2013-01-01">January</option>
        </select>
        <button name="optionschosenname" id="optionschosenid"> Select Additional Option </button>
    </form>
</div> 
    <div id="chart" name="chart">
    <?php echo $data;
        echo 'hello'; ?>    
    <br /> -->
    Test 0.11
   </div>
   <button id="testId">click me</button>

   <br />
   <br />
   <div id="ChartDiv">

   </div>
   </body>
4

1 回答 1

1

您的问题的答案很可能是“选项 3”-您完全偏离了标准:)

我不知道你的 PHP $data 变量中有什么——你没有显示它是在哪里声明和设置的。我看到一个名为 data 的 Javascsript 变量。我想知道您是否有这样的印象，即 javascript 变量和 PHP 变量彼此可见？他们肯定不是。

底线是你应该尽可能地把所有东西分开——你似乎已经开始这样做了。从 JS 文件中包含您的 javascript。从模板中包含您的 HTML。

即使您是新手，但您已经足够努力，以至于您应该直接进入MVC 框架。它会迫使你至少学习一些好的做法。

于 2014-07-16T22:32:54.497 回答