Làm cách nào để tạo mỗi hàng trong bảng HTML biểu đồ hình tròn trong Highcharts?

Question

Ví dụ bàn của tôi sẽ là như thế này:

  agree neutral disagree 
    q1  10  4  4 
    q2  16  1  1 
    q3  18  0  0 
    q4  15  2  1 
    q5  13  5  0 

và tôi muốn thực hiện q1 một biểu đồ pie với đồng ý, trung lập, và không đồng ý như các lĩnh vực khác nhau, và tương tự cho q2, q3..etc.

<script type="text/javascript"> 

     $(function() { 
      var chart; 
     $('#container').highcharts({ 
      data: { 
       table: document.getElementById('datatable') 
      }, 
      chart: { 
       type: 'column' 
      }, 
      title: { 
       text: '' 
      }, 
      yAxis: { 
       allowDecimals: false, 
       title: { 
        text: 'Persons' 
       } 
      }, 
      tooltip: { 
       formatter: function() { 
        return '<b>'+ this.series.name +'</b><br/>'+ 
         this.point.y +' individuals said '+ this.point.name.toLowerCase(); 
       } 
      }, 

     }); 
    }); 

    /********************************************** 

    **********************************************/ 


     $(function() { 
      var chart; 
     $('#container2').highcharts({ 
      data: { 
       table: document.getElementById('datatable') 
      }, 
      chart: { 
       type: 'pie' 
      }, 
      title: { 
       text: '' 
      }, 
      yAxis: { 
       allowDecimals: false, 
       title: { 
        text: 'Persons' 
       } 
      }, 
      tooltip: { 
       formatter: function() { 
        return '<b>'+ this.series.name +'</b><br/>'+ 
         this.point.y +' individuals said '+ this.point.name.toLowerCase(); 
       } 
      }, 

     }); 
    }); 


    /**********************************************/ 

    /**********************************************/ 
    $(function() { 
     var chart; 
     $(document).ready(function() { 
      chart = new Highcharts.Chart({ 
       chart: { 
        renderTo: 'container3', 
        plotBackgroundColor: null, 
        plotBorderWidth: null, 
        plotShadow: false, 
        margin: [0, 0, 0, 0], 
        spacingTop: 0, 
        spacingBottom: 0, 
        spacingLeft: 0, 
        spacingRight: 0    
       }, 
       title: { 
        text: '' 
       }, 
       tooltip: { 
        formatter: function() { 
         return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %'; 
        } 
       }, 
       legend: { 
        enabled:true 
       }, 
       plotOptions: { 
        pie: { 
         allowPointSelect: true, 
         cursor: 'pointer', 
         size: '50%', 
         dataLabels: { 
          enabled: false 
         } 
        } 
       }, 
       series: 
       [ 
        { 
        type: 'pie', 
        name: 'testname1', 
        center: [70, 140],//+130 to the x-axis 
        showInLegend:true, 
        data: [ 
         ['Commerce', 33.0], 
         ['Engineering',  32.3], 
         { 
          name: 'Financial Services', 
          y: 18.8, 
          sliced: true, 
          selected: true 
         }, 
         ['Logistics, Aviation & Shipping', 5.5], 
         ['Seafood & Marine',  9.2], 
         ['Corporate Services & others', 1.2] 
        ] 
        } 
        ,{ 
        type: 'pie', 
        name: 'testname2', 
        center: [200, 140], 
        showInLegend:false, 
        data: [ 
         ['Commerce', 33.0], 
         ['Engineering',  32.3], 
         { 
          name: 'Financial Services', 
          y: 18.8, 
          sliced: true, 
          selected: true 
         }, 
         ['Logistics, Aviation & Shipping', 5.5], 
         ['Seafood & Marine',  9.2], 
         ['Corporate Services & others', 1.2] 
        ] 
        }, 
        { 
        type: 'pie', 
        name: 'testname3', 
        center: [330, 140], 
        showInLegend:false, 
        data: [ 
         ['Commerce', 33.0], 
         ['Engineering',  32.3], 
         { 
          name: 'Financial Services', 
          y: 18.8, 
          sliced: true, 
          selected: true 
         }, 
         ['Logistics, Aviation & Shipping', 5.5], 
         ['Seafood & Marine',  9.2], 
         ['Corporate Services & others', 1.2] 
        ] 
        }, 
        { 
        type: 'pie', 
        name: 'testname4', 
        center: [460, 140], 
        showInLegend:false, 
        data: [ 
         ['Commerce', 33.0], 
         ['Engineering',  32.3], 
         { 
          name: 'Financial Services', 
          y: 18.8, 
          sliced: true, 
          selected: true 
         }, 
         ['Logistics, Aviation & Shipping', 5.5], 
         ['Seafood & Marine',  9.2], 
         ['Corporate Services & others', 1.2] 
        ] 
        }, 
        { 
        type: 'pie', 
        name: 'testname5', 
        center: [590, 140], 
        showInLegend:false, 
        data: [ 
         ['Commerce', 33.0], 
         ['Engineering',  32.3], 
         { 
          name: 'Financial Services', 
          y: 18.8, 
          sliced: true, 
          selected: true 
         }, 
         ['Logistics, Aviation & Shipping', 5.5], 
         ['Seafood & Marine',  9.2], 
         ['Corporate Services & others', 1.2] 
        ] 
        }, 
        { 
        type: 'pie', 
        name: 'testname6', 
        center: [720, 140], 
        showInLegend:false, 
        data: [ 
         ['Commerce', 33.0], 
         ['Engineering',  32.3], 
         { 
          name: 'Financial Services', 
          y: 18.8, 
          sliced: true, 
          selected: true 
         }, 
         ['Logistics, Aviation & Shipping', 5.5], 
         ['Seafood & Marine',  9.2], 
         ['Corporate Services & others', 1.2] 
        ] 
        }, 
        { 
        type: 'pie', 
        name: 'testname7', 
        center: [850, 140], 
        showInLegend:false, 
        data: [ 
         ['Commerce', 33.0], 
         ['Engineering',  32.3], 
         { 
          name: 'Financial Services', 
          y: 18.8, 
          sliced: true, 
          selected: true 
         }, 
         ['Logistics, Aviation & Shipping', 5.5], 
         ['Seafood & Marine',  9.2], 
         ['Corporate Services & others', 1.2] 
        ] 
        }, 
        { 
        type: 'pie', 
        name: 'testname8', 
        center: [980, 140], 
        showInLegend:false, 
        data: [ 
         ['Commerce', 33.0], 
         ['Engineering',  32.3], 
         { 
          name: 'Financial Services', 
          y: 18.8, 
          sliced: true, 
          selected: true 
         }, 
         ['Logistics, Aviation & Shipping', 5.5], 
         ['Seafood & Marine',  9.2], 
         ['Corporate Services & others', 1.2] 
        ] 
        } 

       ] 

      },function(chart) { 

      $(chart.series[0].data).each(function(i, e) { 
       e.legendItem.on('click', function(event) { 
        var legendItem=e.name; 

        event.stopPropagation(); 

        $(chart.series).each(function(j,f){ 
          $(this.data).each(function(k,z){ 
           if(z.name==legendItem) 
           { 
            if(z.visible) 
            { 
             z.setVisible(false); 
            } 
            else 
            { 
             z.setVisible(true); 
            } 
           } 
          }); 
        }); 

       }); 
      }); 
     }); 
     }); 

    }); 


    </script> 

LƯU Ý: Biểu đồ đầu tiên lấy dữ liệu từ bảng tôi đang sử dụng thành công.

Hai cách còn lại là cố gắng trả lời câu hỏi của tôi.

Đây là kết quả của mã tôi đã đăng:

http://tinypic.com/r/11uyj3s/8

Answer 1

Ví dụ: http://jsfiddle.net/4Kn5t/

Bạn cần phải thiết lập ba tùy chọn bổ sung cho mỗi biểu đồ, để nói mà hàng nên được sử dụng cho một pie:

$('#container2').highcharts({ 
    data: { 
     table: document.getElementById('datatable'), 
     switchRowsAndColumns: true, // use rows as points 
     startRow: 1, 
     endRow: 2 // use row == 2 
    }, 
    chart: { 
     type: 'pie' 
    }, 
    title: { 
     text: 'Data extracted from a HTML table in the page' 
    }, 
    yAxis: { 
     allowDecimals: false, 
     title: { 
      text: 'Units' 
     } 
    }, 
    tooltip: { 
     formatter: function() { 
      return '<b>'+ this.series.name +'</b><br/>'+ 
       this.point.y +' '+ this.point.name.toLowerCase(); 
     } 
    } 
});