0

php から javascript に 2 つの配列を渡す必要があるため、 json_encodeでパラメーターを渡すときに問題が発生します。配列を配置しない場合、コードは正常に実行されます

これは私のjavascriptチャートコードです:

function ChangeChartType(chart, series, newType) {
    newType = newType.toLowerCase();
    for (var i = 0; i < series.length; i++) {
        var srs = series[0];
        try {
            srs.chart.addSeries({
                type: newType,
                stack: srs.stack,
                yaxis: srs.yaxis,
                name: srs.name,
                color: srs.color,
                data: srs.options.data
            },
            false);
            series[0].remove();
        } catch (e) {
        }
    }
}

// Two charts definition
var chart1, chart2;

// Una vez que el DOM (documento) ha acabado de cargar
$(document).ready(function() {


    // First chart initialization
    chart1 = new Highcharts.Chart({
     chart: {
        renderTo: 'chart_1',
        type: 'column',
        height: 350,
     },
     title: {
        text: "<?php echo $titulo; ?>"
     },
     xAxis: {
        categories: ['Processing.js', 'Impact.js', 'Other', 'Ease.js', 'Box2D.js', 'WebGL', 'DOM', 'CSS', 'Canvas', 'Javascript']
     },
     yAxis: {
        title: {
           text: 'Meses'
        }
     },
    },function(chart){

       //var i = 0;

        for(i=0; i<3; i++) {

            chart.addSeries({
                data: [32, 43, 42],
                index: 0,
                zIndex:1
            });
        }


    });

    // Second chart initialization (pie chart)
    chart2 = new Highcharts.Chart({
        chart: {
            renderTo: 'chart_2',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
        },
        title: {
            text: "<?php echo $titulo; ?>"
        },
        tooltip: {
            formatter: function() {
                    var s;
                    if (this.point.name) { // the pie chart
                        s = ''+
                            this.point.name +': '+ this.y + ' totales';
                    } else {
                        s = ''+
                            this.x  +': '+ this.y + ' totales';
                    }
                    return s;
            }
            //pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                },
                showInLegend: true
            }
        },
         series: [{
            type: 'pie',
            name: 'Resultado',
            data: [<?php echo $resultado ?>]
        }]
    });

    // Switchers (of the Chart1 type) - onclick handler
    $('.switcher').click(function () {
        var newType = $(this).attr('name');
        ChangeChartType(chart1, chart1.series, newType);
    });
});

ダイアログウィンドウで両方のチャートを開きます

$(function() {

  $( "#dialog1" ).dialog({
    autoOpen: false,
    width: 950,
    height: 460,
    show: {
      effect: "blind",
      duration: 1000
    },
    hide: {
      effect: "blind",
      duration: 1000
    }
  });

  $( "#dialog2" ).dialog({
    autoOpen: false,
    width: 650,
    height: 760,
    show: {
      effect: "blind",
      duration: 1000
    },
    hide: {
      effect: "blind",
      duration: 1000
    }
  });

  $( "#opener1" ).click(function() {
    $( "#dialog1" ).dialog( "open" );
  });

  $( "#opener2" ).click(function() {
    $( "#dialog2" ).dialog( "open" );
  });

});

問題は、この配列を追加して['Processing.js', 'Impact.js', 'Other', 'Ease.js', 'Box2D.js', 'WebGL', 'DOM', 'CSS', 'Canvas', 'Javascript']、デフォルト名の代わりに月と名前を追加しようとしたときです

// Two charts definition
var chart1, chart2;

// Una vez que el DOM (documento) ha acabado de cargar
$(document).ready(function() {

  var nombres = <?php echo json_encode($names); ?>;   //I CAN'T SEE MY FIRST PIE CHART
  var meses = <?php echo json_encode($valorX); ?>;      //WHEN I INSERT BOTH VARIABLES

    // First chart initialization
    chart1 = new Highcharts.Chart({
     chart: {
        renderTo: 'chart_1',
        type: 'column',
        height: 350,
     }, 

PHPの私の部分

$valorX = array('Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre');
$names = array('Ana', 'Elena', 'Juan');

だから、私は何が間違っていたのか分かりません。これらの配列のみが宣言されているため、2 番目のグラフ (円グラフ) は表示されません。私のコードは作成中です。私の下手な英語、コーディング、申し訳ありませんが、どうもありがとうございました!!!!!!

4

0 に答える 0