Question

我是Highcharts json的新手，我使用带有渐变填充的饼图。过去几天我一直面临着从php中提取json数据以填充带有渐变填充的饼图的问题。已经尝试过SO答案，但我仍然无法找到合适的解决方案。我的图表没有在浏览器上显示，但是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);

        });
   });

这是我的 data.php ：

$sql="SELECT mozila,ie,chrome,opera,safari,torch FROM webmarketing";
$resultSql = mysql_query($sql);
$result = array();
while($rows=mysql_fetch_array($resultSql)) {
    $result[] = array('name' => array('MOZILA' => $rows['mozila']));
   $result[] = array('name' => array('IE' => $rows['ie']));
   $result[] = array('name' => array('CHROME' => $rows['chrome']));
   $result[] = array('name' => array('OPERA' => $rows['opera']));
   $result[] = array('name' => array('OTHERS' => $rows['safari']+$rows['torch']));
   }
print json_encode($result, JSON_NUMERIC_CHECK);

图表错误 enter image description here

亲切地请求你请告诉我如何从php和mysql中提取数据到json代码。

Answer 1

查看Highlight图表文档，您的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循环中发生了这种情况。

如果你有多行，那么上面的逻辑将不是你想要的，因为你可能希望GROUP BY来推算你的结果。

您的图表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);

    });

}）;

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

1 个答案: