從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）

回答

相關問題