使用Highcharts中的渐变填充将JSON数据导出到Pie中时生成问题

时间:2014-04-30 11:29:57

标签: php json highcharts

我使用json,php和mysql查询从Highcharts创建一个带有渐变填充图表的Pie.Debug通过firebug控制台但没有错误,图形也不显示。我创建一个静态图[link] http://jsfiddle.net/sunman/YKE2P/10/这样我想用json和mysql创建这个动态。这是我的问题我的json数据不生成graph.Below是我的代码。我的json数据显示如下:

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

的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 without cost',
            data:[]

        }]
      });
      $.getJSON("data.php", function(json) {
          //options.series.push(data);
                    options.series[0].data = json;
          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)) {
   $arr['name'] = array('MOZILA' => $rows['mozila']);
   $arr1['name']= array('IE' => $rows['ie']);
   $arr2['name'] = array('CHROME' => $rows['chrome']);
   $arr3['name']= array('OPERA' => $rows['opera']);
   $arr4['name'] = array('OTHERS' => $rows['safari']+$rows['torch']);
    }
     array_push($result,$arr);
     array_push($result,$arr1);
    array_push($result,$arr2);
    array_push($result,$arr3);
    array_push($result,$arr4);
   print json_encode($result, JSON_NUMERIC_CHECK);

因此请求您帮助我的代码在哪里出错。我想link这种类型的图,但是有动态。我不知道json代码。所以请你向我提出问题。

1 个答案:

答案 0 :(得分:0)

问题在于:

  $.getJSON("data.php", function(json) {
    options.series.push(data);
    chart = new Highcharts.Chart(options);
  });

你正在添加新系列,它有一些奇怪的格式..我建议改用它:

  $.getJSON("data.php", function(json) {
    options.series[0].data = json;
    chart = new Highcharts.Chart(options);
  });