使用 php 和 Ajax 的 Highcharts 柱形图

Posted 2023-02-19

【中文标题】使用 php 和 Ajax 的 Highcharts 柱形图

【英文标题】：Highcharts Column-chart with php and Ajax

【发布时间】：2014-02-26 01:52:25

【问题描述】：

我对 highcharts 有疑问，因为我无法在我的 highcharts 图表上加载我的 php 数据，当我单击一个表单（id=year）时它将开始。 我做了一个ajax调用，响应是这样的：

""zone":["NORD-OVEST","NORD-EST","CENTRO","SUD","ISOLE","TOTALE ITALIA"],"elementare":[71,69,59,44,44,59],"medie":[8,5,6,4,3,5],"diploma":[3,3,3,2,2,3],"laurea":[1,0,1,0,1,1]".

当我必须将此数据加载到 highcharts 图表时，我遇到了问题，因为 ajax 调用是正确的，但图表不起作用..它仍然是黑色，右上角有图例。

这是我的代码 js：

function bottone1() 
    $('#bottone1').click(function()//bottone1 is my id button form
        var year=$('#year').val();
        if((year!='seleziona'))
            $.ajax(
                url: './php/grafico1.php',
                data: 'year': year,
                datatype: 'json',
                success: function(data) 
                    grafo1(data);
                ,
                error: function(data) 
                    alert('non funge');
                
            );
        ;
    );
;

function grafo1()
var options = 
    chart: 
        renderTo: 'grafico',
        type: 'column',
        marginRight: 130,
        marginBottom: 25
    ,
    title: 
        text: 'Titolo Di Studio',
        x: -20 //center
    ,
    subtitle: 
        text: '',
        x: -20
    ,
    xAxis: 
        categories: []
    ,
    yAxis: 
        title: 
            text: 'Percentuale'
        ,
        plotLines: [
                value: 0,
                width: 1,
                color: '#808080'
            ]
    ,
    tooltip: 
        formatter: function() 
            return '<b>' + this.series.name + '</b><br/>' +
                    this.x + ': ' + this.y;
        
    ,
    legend: 
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'top',
        x: -10,
        y: 100,
        borderWidth: 0
    ,
    series: [, , , ]

$.ajax(
    dataType: "json",
    url: "./php/grafico1.php",
    type: 'get',
    data: "",
    success: function(data) 
        options.xAxis.categories = data.zona;
        options.series[0].name = 'Licenza Elementare';
        options.series[0].data = data.elementare;
        options.series[1].name = 'Licenza Media';
        options.series[1].data = data.medie;
        options.series[2].name = 'Diploma';
        options.series[2].data = data.diploma;
        options.series[3].name = 'Laurea';
        options.series[3].data = data.laurea;
        chart = new Highcharts.Chart(options);
    
);
;

这里是我的图表响应：

"zone":[],"elementare":[],"medie":[],"diploma":[],"laurea":[]

为什么我无法获取数据？

【问题讨论】：

欢迎来到 ***，你的问题有点长。更具体一点可能是明智的——你已经提供了很多代码。您可以通过使用例如 jsfiddle.com 来增加获得成功答案的机会，并缩短您发布的代码量。

您进行了 ajax 调用，成功时调用函数 grafo1 并带有一个它甚至不需要的参数，只是为了进行另一个 ajax 调用并成功创建图形？为什么有两个ajax调用？为什么不使用第一个数据来填充图表？非常混乱...

1. json数据中有数字吗？ 2.您收到任何错误吗？ 3. 你有现场演示吗？

【参考方案1】：

我在一个带有 asp.net 和 json 的应用程序中使用了 highcharts。Highcharts 中有多种类型的柱形图可用。你用的是哪一个？

【讨论】：

xAxis： 类别：[] ，和系列：[[,,,]

你能把你正在使用的图表列的名称发给我吗？

你的 JSON String Like - xAxis: categories: [] , and series: [[,,,] 这是错误的 .JSON String 应该是这 - xAxis: categories: ['a','b','c'] .in your Json string categories :[] 是错误的尝试创建与 highcharts.com.and 上的示例中给出的相同的 Json 字符串在系列系列中：[ name: 'aa',data: [1,2, 3], name: 'bb',data: [4, 5, 6], name: 'cc',data: [4, 2, 1], ] 注释数据：[int,int,int] --仅不带引号

使用静态没关系，使用我的 php 不给 json... 并尝试：类别：[] 和系列相同，和 [] 但我不工作...