从JSON结果中获取数据到一个图表（Highcharts）

我有一个工作脚本，它生成一个包含JSON结果数据的图表。我有要求为图表添加更多的数据，即每列的顶部显示每列的记录数。从JSON结果中获取数据到一个图表（Highcharts）

JSON结果看起来像使用

[{"name":"Name","data":["A","B","C","D","E","F","G","H","I","J","K","L","M"]},{"name":"Satisfaction %","data":[92.5,80,83.6,80,100,82.3,82,67.9,77.1,83.3,71.1,76.7,64]},{"data":[8,24,11,2,1,26,10,96,14,30,9,18,10]}]

上述JSON结果和下面的脚本我怎么能包括JSON结果

[8,24,11,2,1,26,10,96,14,30,9,18,10]

下面我表脚本

的最后一部分。

$(function() { 

var categories=[]; 
var data2 =[]; 


var chart; 
$(document).ready(function() { 

     $.getJSON("charts_get_data.php", function(json) { 
     $.each(json,function(i,el) { 
     if (el.name=="Name") 
     categories = el.data; 
     else data2.push(el); 
     }); 



     $('#container1').highcharts({ 
      chart: { 
       renderTo: 'container', 
       type: 'column', 
       marginTop: 60, 
       marginRight: 30, 
       marginBottom: 100 
      }, 
      title: { 
       text: 'Overall Satisfaction.<br><?php print $row_Questions['Q'];?>', 
       x: -20, //center 
       style: { 
       fontFamily: 'Tahoma', 
       color: '#000000', 
       fontWeight: 'bold', 
       fontSize: '11px' 
       } 
      }, 
      subtitle: { 
       text: 'Between <?php print $_POST['FromDate'] . " and " . $_POST['ToDate'];?>', 
       x: -20 
      }, 
      xAxis: { 
       categories: categories, 
       labels: { 
       style: { 
        color: '#F00', 
        font: '9px Tahoma, Verdana, sans-serif' 
       } 
       } 
      }, 
      yAxis: { 
       max:100, 
       showFirstLabel: false, 
       lineColor:'#999', 
       lineWidth:1, 
       tickColor:'#666', 
       tickWidth:1, 
       tickLength:2, 
       tickInterval: 10, 
       gridLineColor:'#ddd', 
       title: { 
        text: 'Percentage', 
        style: { 
        fontFamily: 'Tahoma', 
        color: '#000000', 
        fontWeight: 'bold', 
        fontSize: '9px' 
        } 
       }, 
       plotLines: [{ 

        color: '#808080' 
       }] 
      }, 

      plotOptions: { 

       series: { 
        pointWidth: 15, 
        dataLabels: { 
        enabled: true, 
        rotation: -90, 
        color: '#000000', 
        align: 'center', 
        format: '{point.y:.1f}', // one decimal 
        y: 30, // 10 pixels down from the top 
        style: { 
         fontSize: '9px', 
         textShadow: false, 
         fontFamily: 'Verdana, sans-serif' 
         } 
        } 
       } 

      }, 

      tooltip: { 
       formatter: function() { 
         return '<b>'+ this.series.name +'</b><br/>'+ 
         this.x +': '+ this.y; 
       } 
      }, 
      credits: { 
       enabled: false 
      }, 
      legend: { 
       enabled: false 
      }, 
      series: data2 

     }); 
    }); 

}); 

});

非常感谢您的任何帮助，你可能会给。

要看起来像：

干杯。

来源

2015-10-14 DCJones

你能不能提供的小提琴。 –

嗨，@Furquan汗这里是一个小提琴，但我不知道JSON结果应该在哪里，但我已经包括它。 https://jsfiddle.net/Blackbox/r6ymnL1j/3/ – DCJones

为什么你想要最后一部分[8,24,11,2,1,26,10,96,14,30,9,18,10]，我的意思是你想显示在每列（总） –

我加你额外的数据为一系列如下

[{"name":"Name","data":["A","B","C","D","E","F","G","H","I","J","K","L","M"]},{"name":"Satisfaction","data":[92.5,80,83.6,80,100,82.3,82,67.9,77.1,83.3,71.1,76.7,64]},{"name":"appendonTop","visible": false,"data":[8,24,11,2,1,26,10,96,14,30,9,18,10]} ];

Addtionaly我给它一个假名字和一个多场“可见”：假的，那么这个数据被称为串联但由于可见：虚假它不会显示为列chart.If你无法把可见：假串联，隐藏

events :{ 
        load: function(){ 
        this.series[1].hide(); 
        } 
       }

在plotOptions我把堆放在正常负载图表事件在系列然后叫Stacklaebls在Y轴如下：

stackLabels: { 
       enabled: true, 
       formatter: function() { 
        // alert("Nishith"); 
        console.log((this.axis.series[1].yData[this.x])); 
        return (this.axis.series[1].yData[this.x]) ; 

       } 
      }

，其结果是this working fiddle

来源

2015-10-14 18:32:47

从JSON结果中获取数据到一个图表（Highcharts）

回答

相关问题