Question

这是我第一次使用javascript搞乱ajax，我很难将自己描述为Web开发人员或Web程序员。所以我打算给你一些我编码的内容，然后先尝试一下，然后描述一下我的问题以及最后要做的事情。

所以我有一个选择div，里面有一些东西。

<select id="month" onchange="refreshGraph()">

当选择一个选项时，这个javascript就会起作用。

function refreshGraph()
{
            var index = document.getElementById('month').selectedIndex;
            var monthOptions = document.getElementById('month').options;
            var selectedDays = monthOptions[index].value;

            $.ajax({
                    url:"divisions.php",
                    type: "POST",
                    dataType: "script",
                    data: {days:selectedDays},
                    success: function(data){
                            $('#divisions').html(data);}
                    });
}

我也尝试将成功函数调用重写为：

$('#divisions').html('<script src="http://code.highcharts.com/highcharts.js">
    <script src="http://code.highcharts.com/modules/exporting.js">'+data+'<\/script<\/script>')

而不是$ .ajax（）我也试过这个

$('#divisions').load("divisions", {days: selectedDays});

这是假设使用div为div的表更新表。

<table>
  <tr>
    <td>
      <div id="divisions" style="min-width: 90%; height: 50%; margin: 0 auto"></div>
    </td>
  </tr>
</table>

现在divisions.php是一个文件，它有一些数据库调用和用纯文本编写的javascript高级图，这意味着没有php或脚本或其他类似于纯文本javascript代码的高级图。毕竟我的php开始就像这样

$(document).ready(function () {
    $('#divisions').highcharts({
        chart: {

以下是我在index_new.php标题中包含的源文件：

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script src="http://code.highcharts.com/modules/exporting.js"></script>
    <script src="divisions.php"></script>

那我该怎么办？考虑到有人在下拉列表中选择的选项，我正在尝试更新图表。下拉列表中的值是传递给divisions.php的其他sql参数。 divisions.php然后在其调用中使用这个额外的sql参数，这会影响表的外观。

第一次加载index_new.php高图时会加载，一切都很好。我面临的问题是，当我选择下拉列表中的任何选项时，图表更新但不显示高图，它显示了以前在首次调用index_new.php时被解释为实际javascript的纯文本javascript（见下文）。所以ajax调用正在工作，我正在抓取变量，但我猜它是我的标题中的javascript没有造型呢？我不知道为什么这不起作用。

而不是高图我更新后得到这个（是的我用name1，name2等替换了实际名称）：

$(document).ready(function () { $('#divisions').highcharts({ chart: { type: 'column' }, title: { text: 'Total Sales By Salesperson' }, xAxis: { title: { text: 'Salesperson'}, categories: ['name1', 'name2', 'name3', 'name4', 'name5', 'name6', 'name7', ] }, yAxis: { min: 0, title: { text: 'Total Sales' } }, tooltip: { formatter: function() { return ''+ this.x +'
'+ this.series.name +': '+ this.y +'
'+ 'Total: '+ this.point.stackTotal; } }, legend: { backgroundColor: '#FFFFFF', reversed: true }, plotOptions: { }, series:[ {name: 'Business Equipment' , data: [0, 400, 80000, 68496, 15800, 170000, 155200, ]},{name: 'Corporate Printing' , data: [0, 0, 0, 6600, 0, 0, 0, ]},{name: 'Document Storage' , data: [0, 0, 0, 0, 0, 18000, 0, ]},{name: 'IT Services' , data: [10000, 0, 0, 4500, 0, 0, 2000, ]},]});})

Answer 1

为什么不使用ajax方法将PHP脚本中的数据加载到高图中？

$(function () {

    $('#month').change(function()
    {
        $.get('divisions.php?selectedData='+ $(this).val(), function (divisions_data)
        {            
            $('#container').highcharts({
                data: {
                    csv: divisions_data
                },
                title: {
                    text: 'My chart title'
                },

                ... rest of your init code ...
            });
        });
    });

});

然后在divisions.php上将呈现图表所需的数据。对于数据结构，请阅读：http://api.highcharts.com/highcharts#series.data

更多信息：http://www.highcharts.com/demo/line-ajax

如何在ajax请求上发送javascript？

1 个答案: