javascript - Ajax Canvas 图表不显示变化？

标签 javascript php ajax canvas

大家好，我有一个关于如何正确显示此图表动态的问题。

此代码是当我选择类别和日期时，图表将根据每个选择的值而变化 enter image description here 下拉类别和日期过滤器:

<form class="form-inline" method='get'>
  <div class="form-group">

        <select name="category" id="category" onchange="showCategory(this.value)">
        <option value="ACCOUNT REGISTER" >ACCOUNT REGISTER</option>
        <option value="ACCOUNT UNREGISTER" >ACCOUNT UNREGISTER</option>
        <option value="CATEGORY 1">CATEGORY 1</option>
        <option value="CATEGORY 2">CATEGORY 2</option>
        <option value="CATEGORY 3">CATEGORY 3</option>
        </select>
    </div>
    <div class="form-group">
        <input class="form-control" id="monthx" type="month" name="monthx" onchange="filter_datex(this.value)">
    </div>

  <select class="form-control input-sm" id="chartType" name="Chart Type">
    <option value="line">Line</option>
    <option value="column">Column</option>
    <option value="bar">Bar</option>
    <option value="pie">Pie</option>
    <option value="doughnut">Doughnut</option>
  </select>  
    <div class="form-group">
        <a class="btn btn-primary pull-right" onclick="printDoc()"  target="_blank" >PRINT</a>
    </div>

</form>

渲染的图表将转到这里的代码!

图表:

  <div  id="printDiv" >
    <div id="displayChart">
    <script>
    window.onload = function() {

    var chart = new CanvasJS.Chart("chartContainer", {
      animationEnabled: true,
      title: {
        text: "First Default Chart Before Onchange"
      },
      data: [{
        type: "pie",
        startAngle: 240,
        yValueFormatString: "##0.00'%'",
        indexLabel: "{label} {y}",
        dataPoints: [
          {y: 79.45, label: "Student"},
          {y: 7.31, label: "Admin"},
          {y: 7.06, label: "Teacher"}
        ]
      }]
    });
    chart.render();
    var chartType = document.getElementById('chartType');
    chartType.addEventListener( "change",  function(){
      chart.options.data[0].type = chartType.options[chartType.selectedIndex].value;
      chart.render();
    });

    }
    </script>

  </div>
</div>

我使用 @Krishnadas PC 之前的答案代码，那么这现在是我的 JavaScript，现在标题正在更改

JSCRIPT:

<script type="text/javascript">
  function getDate(){
    var monthx =document.getElementById('monthx').value;

  }
  function getCategory(){
    var category =document.getElementById('category').value;

  }
  function printDoc(){
    var getCategory = getCategory();
    var getDate = getDate();
    window.location='assets/lib/FPDF/print?category='+getCategory+'&date='+getDate;

  }
  $('#monthx').hide();
  function showCategory(str) {
  var xhttp; 
  if (str == "") {
    document.getElementById("displayChart").innerHTML = "";
    return;
  }
  if (str == "ACCOUNT REGISTER" || str == "ACCOUNT UNREGISTER" || str == "default") {
    $('#monthx').hide();
  }
  else{
    $('#monthx').show();
  }
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {


                    var json_datax = this.responseText;
                    var monthx =document.getElementById('monthx').value;
                    var category =document.getElementById('category').value;

                    console.log(this.responseText)
                    var chart=new CanvasJS.Chart("chartContainer", {
                        animationEnabled: true, title: {
                            text: ''+category+" "+monthx+''
                        }
                        , data: [ {
                            type: "pie", startAngle: 240, yValueFormatString: "##0.00'%'", indexLabel: "{label} {y}", dataPoints: 
                            [ {
                                y: 79.45, label: 3123
                            }
                            , {
                                y: 7.31, label: "x"
                            }
                            , {
                                y: 7.06, label: "Baidu"
                            }
                            , {
                                y: 4.91, label: "Yahoo"
                            }
                            , {
                                y: 11.26, label: "Others"
                            }
                            ]
                        }
                        ]
                    }
                    );
                    chart.render();
                    var chartType=document.getElementById('chartType');

                    chartType.addEventListener( "change", function() {
                        chart.options.data[0].type=chartType.options[chartType.selectedIndex].value;
                        chart.render();
                    }
                    );
                }
            };
  xhttp.open("GET", "chart_ajax.php?category="+str+"&date="+monthx, true);
  xhttp.send();
}

  function filter_datex(str) {
  var xhttp; 
  if (str == "") {
    document.getElementById("displayChart").innerHTML = "";
    return;
  }
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    var json_datax = this.responseText;
                    var monthx =document.getElementById('monthx').value;
                    var category =document.getElementById('category').value;
                    console.log(this.responseText)
                    var chart=new CanvasJS.Chart("chartContainer", {
                        animationEnabled: true, title: {
                            text: ''+category+" "+monthx+''
                        }
                        , data: [ {
                            type: "pie", startAngle: 240, yValueFormatString: "##0.00'%'", indexLabel: "{label} {y}", dataPoints: 
                            [ {
                                y: 79.45, label: 3123
                            }
                            , {
                                y: 7.31, label: "x"
                            }
                            , {
                                y: 7.06, label: "Baidu"
                            }
                            , {
                                y: 4.91, label: "Yahoo"
                            }
                            , {
                                y: 11.26, label: "Others"
                            }
                            ]
                        }
                        ]
                    }
                    );
                    chart.render();
                    var chartType=document.getElementById('chartType');

                    chartType.addEventListener( "change", function() {
                        chart.options.data[0].type=chartType.options[chartType.selectedIndex].value;
                        chart.render();
                    }
                    );
                }
            };
  xhttp.open("GET", "chart_ajax.php?category="+monthx+"&date="+str, true);
  xhttp.send();
  }

</script>

然后在我的ajax页面中，类别和日期值将在页面上的POST上，然后使用get方法获取变量并根据获取值执行查询，查询结果将可以 fetch as json 或 echo 作为整个 json 代码，

CHART_AJAX.php

include('db.php');
$category = $_GET['category'];
//$category_ID =  $_GET['category_ID'];
$date = $_GET['date'];
$sql = "MY QUERY $date and $category";
$result = $con->query();
$row = $result->fetch_assoc();

$data  = json_encode($row['json']);

print_r ($data);
//result or print_r ($data)
//[ {
//    y: 79.45, label: 3123
//}
//, {
//    y: 7.31, label: "x"
//}
//, {
//    y: 7.06, label: "Baidu"
//}
//, {
//    y: 4.91, label: "Yahoo"
//}
//, {
//    y: 11.26, label: "Others"
//}
//]

我想要的是来自chart_ajax.php的print_r的结果必须传递给js var而不是 var json_data =//传递ajax_chart.php结果

data: [ {
    type: "pie", startAngle: 240, yValueFormatString: "##0.00'%'", indexLabel: "{label} {y}", dataPoints: 
    //this var json_data will be go here or else 
    //the result of ajax_chart.php must be go here !!! directly? 
}
]

然后我想要的打印按钮是，当我单击它时，它必须转到新选项卡，例如 target="_BLANK" 而不是 SELF Windows 位置？

    function getDate(){
        var monthx =document.getElementById('monthx').value;

      }

  function getCategory(){
    var category =document.getElementById('category').value;

  }
  function printDoc(){
    var getCategory = getCategory();
    var getDate = getDate();
    window.location='assets/lib/FPDF/print?category='+getCategory+'&date='+getDate;

  }

最佳答案

我不明白你想通过使用ajax来实现什么目的。只有一个标题取自 $_GET。您只能从 ajax 文件返回该值。其余代码可以在 ajax 响应部分内。届时这些改变就会发挥作用。我这里已经测试过了。

在chart_ajax.php中

   <?php echo $title=$_GET['q'];

在真实的应用程序中，您可以从数据库或其他第三方 API 获取图表的值，并仅以 json 形式返回数据。无需渲染 html 并循环这些数据并在客户端(浏览器)端构建更新的图表。

在主文件中更新 ajax 响应部分，如下所示。

xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    document.getElementById("displayChart").innerHTML = this.responseText;
                    console.log(this.responseText)
                    var chart=new CanvasJS.Chart("chartContainer", {
                        animationEnabled: true, title: {
                            text: '"'+this.responseText+'"'
                        }
                        , data: [ {
                            type: "pie", startAngle: 240, yValueFormatString: "##0.00'%'", indexLabel: "{label} {y}", dataPoints: [ {
                                y: 79.45, label: 3123
                            }
                            , {
                                y: 7.31, label: "Bing"
                            }
                            , {
                                y: 7.06, label: "Baidu"
                            }
                            , {
                                y: 4.91, label: "Yahoo"
                            }
                            , {
                                y: 11.26, label: "Others"
                            }
                            ]
                        }
                        ]
                    }
                    );
                    chart.render();
                    var chartType=document.getElementById('chartType');
                    chartType.addEventListener( "change", function() {
                        chart.options.data[0].type=chartType.options[chartType.selectedIndex].value;
                        chart.render();
                    }
                    );
                }
            };

这些更改将更新图表，但这不会构成真正的应用程序。

关于javascript - Ajax Canvas 图表不显示变化？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50182024/

上一篇：javascript - 如何实例化要在单元测试中使用的 Sequelize 模型？

下一篇：javascript - MongoDB Node 索引错误

相关文章：

c# - 如何在单击按钮并验证后调用使用 ajax 的 asp.net mvc 表单提交事件？

Javascript处理不同时区的夏令时

javascript - jquery遍历父div改变背景颜色

PHP define() 函数

ajax - 通过 ajax 向 Controller 发送数据不起作用

javascript - 连续的 Ajax 调用已交换数据

javascript - 我想用 Javascript 编写桌面 OSX 或 Windows 应用程序——有什么经验吗？

javascript - 合并两个 jquery 函数

php - Cpdf.php 行 3855 : Undefined index: at barryvdh/laravel-dompdf 中的 ErrorException

PHP MySQL 使用预定义的用户名和注册 ID 注册

©2024 IT工具网  联系我们