使用 php 和 Ajax 的 Highcharts 柱形图

Posted

技术标签:

【中文标题】使用 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... 并尝试:类别:[] 和系列相同,和 [] 但我不工作...

以上是关于使用 php 和 Ajax 的 Highcharts 柱形图的主要内容,如果未能解决你的问题,请参考以下文章

PHP使用HighChart生成股票K线图详解

highChart数据动态更新

Highchart Json 与传统的 JSON 数据不同

教你做一个简单的highchart.js图表

highchart应用示例1--2个不同类型变量2个y轴

Javascript HighChart 在 Series 和 json 对象中有多个名称和数据