0

这是我第一次将 ajax 与 javascript 混为一谈，我几乎不会将自己描述为 Web 开发人员或 Web 程序员。因此，我将先向您介绍我编写的代码和尝试过的内容，然后描述我的问题以及它最后应该做什么。

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

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

And when an option is chosen this javascript is suppose to work.

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});

这是假设更新一个带有 id 的 div 的表。

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

现在 Divisions.php 是一个文件，其中包含一些数据库调用和一个用纯文本编写的 javascript highchart，这意味着没有 php 或脚本或其他类似的东西围绕纯文本 javascript 代码，即 highchart。所以毕竟我的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. divisions.php然后在其调用中使用这个额外的 sql 参数，这会影响表的外观。

在第一次加载index_new.phphighchart 时，一切都很好。我面临的问题是，当我在下拉列表中选择任何选项时，图表会更新，但不是显示高图，而是显示纯文本 javascript（见下文），当 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, ]},]});})
4

1 回答 1

0

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

$(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

于 2013-10-22T20:47:05.467 回答