如何使用highchart将PHP格式化为饼图中JSON的正确字符串_Php_Json_Highcharts

如何使用highchart将PHP格式化为饼图中JSON的正确字符串

php json highcharts

如何使用highchart将PHP格式化为饼图中JSON的正确字符串,php,json,highcharts,Php,Json,Highcharts,我是Highcharts json的新手，我正在使用带有渐变填充的饼图。在过去的几天里，我一直面临着从php提取json数据以填充带有渐变填充的饼图的问题。我已经尝试过这样的答案，但仍然无法找到合适的解决方案。我的图表不显示在浏览器上，但json数据显示在这里 [{"name":{"MOZILA":45.0}},{"name":{"IE":26.8}},{"name":{"CHROME":12.8}},{"name":{"OPERA":6.2}},{"name":{"OTHERS":9.2}}

我是Highcharts json的新手，我正在使用带有渐变填充的饼图。在过去的几天里，我一直面临着从php提取json数据以填充带有渐变填充的饼图的问题。我已经尝试过这样的答案，但仍然无法找到合适的解决方案。我的图表不显示在浏览器上，但json数据显示在这里

 [{"name":{"MOZILA":45.0}},{"name":{"IE":26.8}},{"name":{"CHROME":12.8}},{"name":{"OPERA":6.2}},{"name":{"OTHERS":9.2}}]

这里我的问题是，我不知道如何将php格式转换为json的正确字符串。问题在于json代码和json编码

这里是我的index.php：

       $(function () {

       // Radialize the colors
    Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) {
        return {
            radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
            stops: [
                [0, color],
                [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
            ]
        };
    });

    // Build the chart
    $('#container').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: ' Rate of a specific project'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.percentage:.1f}',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    },
                    connectorColor: 'silver'
                }
            }
        },
        series: [{
            type: 'pie',
            name: 'Total Marketing',
            data:[]

        }]
    });
        $.getJSON("data.php", function(data){

        //options.series[6].data = json;
            chart.series[0].setData(data);

           chart = new Highcharts.Chart(options);

        });
   });

图形中的错误

请告诉我如何将php和mysql中的数据提取到json代码

查看Highlight charts文档，您的JSON输出似乎需要更改一点。假设您的查询只返回一行，我想这就是您想要的：

$result = array();
while($rows=mysql_fetch_array($resultSql)) {
    $result[] = array('name' => 'MOZILA', 'y' => $rows['mozila']);
    $result[] = array('name' => 'IE', 'y' => $rows['ie']);
    $result[] = array('name' => 'CHROME', 'y' => $rows['chrome']);
    $result[] = array('name' => 'OPERA', 'y' => $rows['opera']);
    $result[] = array('name' => 'OTHERS', 'y' => $rows['safari']+$rows['torch']);

}

然后消除所有的array_push调用，因为这是在while循环中发生的

如果您有多行，那么上面的逻辑将不是您想要的，因为您可能需要一个分组来汇总结果

您的图表javascript也不正确。您正在将图表呈现到容器中，而不将其保存到变量中。稍后，当您尝试将其保存到图表变量时，它与初始图表没有连接。请尝试以下方法：

var chart;
$(function () {

   // Radialize the colors
Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) {
    return {
        radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
        stops: [
            [0, color],
            [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
        ]
    };
});

// Build the chart
chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false
    },
    title: {
        text: ' Rate of a specific project'
    },
    tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}</b>'
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b>: {point.percentage:.1f}',
                style: {
                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                },
                connectorColor: 'silver'
            }
        }
    },
    series: [{
        type: 'pie',
        name: 'Total Marketing',
        data:[]

    }]
});
    $.getJSON("data.php", function(data){

        chart.series[0].setData(data);

    });

var图；
$（函数（）{
//使颜色呈放射状
Highcharts.getOptions（）.colors=Highcharts.map（Highcharts.getOptions（）.colors，函数（color）{
返回{
径向梯度：{cx:0.5，cy:0.3，r:0.7}，
停止：[
[0，颜色]，
[1，Highcharts.Color（Color）.brighlight（-0.3）.get（'rgb'）]//darken
]
};
});
//绘制图表
图表=新的高点图表。图表({
图表：{
renderTo:'容器'，
plotBackgroundColor:null，
plotBorderWidth:null，
plotShadow:false
},
标题：{
文本：“特定项目的费率”
},
工具提示：{
pointFormat:“{series.name}：{point.percentage:.1f}”
},
打印选项：{
馅饼：{
allowPointSelect:true，
光标：“指针”，
数据标签：{
启用：对，
格式：{point.name}:{point.percentage:.1f}，
风格：{
颜色：（Highcharts.theme&&Highcharts.theme.ContractTextColor）| |“黑色”
},
接头颜色：“银色”
}
}
},
系列：[{
键入“pie”，
名称：'全面营销'，
数据：[]
}]
});
$.getJSON（“data.php”，函数（数据）{
chart.series[0].setData（数据）；
});

}))

您的问题并不完全清楚您希望JSON看起来是什么样的。您能否澄清您在文章顶部的示例字符串是否是您希望JSON字符串的格式？另外，您的SQL查询是返回多行还是仅返回一行？@davidethell感谢您的回复。我需要知道如何使用Highcharts通过饼图的json代码提取PHP和MySql数据。从我的PHP文件中，json_encode打印以下内容：[{“name”：{“MOZILA”：45.0}，{“name”：{“IE”：26.8}，{“name”：{“CHROME”：12.8}，{“name”：{“OPERA”：6.2}，{“name”：{“name”：{“OTHERS”：9.2}）。但是当我在json函数中设置这些数据时，我的图形不是用代码生成的。请告诉我如何将php数据传递到json函数中。我已编辑了答案，以更改您的php输出，使其符合高亮显示的要求。@davidethell…我已更改了所有代码，但图形仍不显示。请告诉我哪里错了。@davidethell感谢您的回复。我检查了我的json数据是否正确，我不明白为什么我的图形不显示。我尝试了所有SO解决方案，但都失败了。因此，请帮助我获得您的响应。现在我的查询返回多行。但是我如何在index.php页面的json函数中调用此json结果。因此，我的图形将被生成。我这样调用$.getJSON（“data.php”，函数（json）{chart.series[0].setData（data）；var chart=new Highcharts.chart（options）；}）；调用json结果是否正确。您没有在正确的位置设置var图表变量，并且您的getJSON函数参数需要为“data”，因为这是传递给setData的内容。请参阅上面我的编辑。所有这些都是未经测试的，但它应该能让你接近正确的方向。仍然没有显示图形。请告诉我解决方案。现在我的图形没有显示，它只显示[object object]：0.0。请给我解决方案。请告诉我为什么我的图形显示我[object object]：0.0。没有显示图形。我在上面附上了我的图像。

var chart;
$(function () {

   // Radialize the colors
Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) {
    return {
        radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
        stops: [
            [0, color],
            [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
        ]
    };
});

// Build the chart
chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false
    },
    title: {
        text: ' Rate of a specific project'
    },
    tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}</b>'
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b>: {point.percentage:.1f}',
                style: {
                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                },
                connectorColor: 'silver'
            }
        }
    },
    series: [{
        type: 'pie',
        name: 'Total Marketing',
        data:[]

    }]
});
    $.getJSON("data.php", function(data){

        chart.series[0].setData(data);

    });