0

javascript で ajax をいじるのはこれが初めてで、自分自身を Web 開発者または Web プログラマーとは言いません。そこで、私がコード化して試したことを最初に示してから、私の問題と最後に何をすべきかを説明します。

だから私はそれにいくつかのものを含むselect 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});

これは、部門の ID を持つ div でテーブルを更新することを想定しています。

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

現在、divisions.php は、いくつかのデータベース呼び出しとプレーン テキストで記述された JavaScript ハイチャートを含むファイルです。つまり、ハイチャートであるプレーン テキストの JavaScript コードを囲む php やスクリプトなどはありません。だから、結局私の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>

それで、私は何をしようとしていますか？誰かがドロップダウンで選択した選択肢を考慮して、グラフを更新しようとしています。ドロップダウンの値は、 に渡される追加の SQL パラメータですdivisions.php。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, ]},]});})
4

1 に答える 1

0

PHP スクリプトからハイチャートにデータをロードする ajax メソッドを使用しないのはなぜですか?

$(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 に答える