원형 차트 (하이 차트)로 html 테이블에서 텍스트를 가져 오는 방법은 무엇입니까?

html 테이블의 데이터를 원형 차트 (HighChart)로 표시하고 있습니다. <th>..</th> 태그 사이에있는 텍스트를 표시하고 싶습니다. 텍스트 대신 .. 슬라이스 ... 슬라이스 슬라이스 슬라이스가 어디에 있든 슬라이스를 표시합니다.원형 차트 (하이 차트)로 html 테이블에서 텍스트를 가져 오는 방법은 무엇입니까?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Pie Charts</title> 
    <script src="js/jquery-migrate-1.0.0.js" type="text/javascript"></script> 
    <script src="js/jquery.js" type="text/javascript"></script> 
    <script> 
     $(function() 
     { 
      // On document ready, call visualize on the datatable. 
      $(document).ready(function() 
      { 
       /** 
       * Visualize an HTML table using Highcharts. The top (horizontal) header 
       * is used for series names, and the left (vertical) header is used 
       * for category names. This function is based on jQuery. 
       * @param {Object} table The reference to the HTML table to visualize 
       * @param {Object} options Highcharts options 
       */ 
       Highcharts.visualize = function (table, options) 
       { 
        // the categories 
        options.xAxis.categories = []; 
        $('tbody th', table).each(function (i) 
        { 
         options.xAxis.categories.push(this.innerHTML); 
        }); 

        // the data series 
        options.series = []; 
        $('tr', table).each(function (i) 
        { 
         var tr = this; 
         $('th, td', tr).each(function (j) 
         { 
          if (j > 0) { // skip first column 
           if (i == 0) 
           { // get the name and init the series 
            options.series[j - 1] = 
            { 
             name: this.innerHTML, 
             data: [] 
            }; 
           } 
           else 
           { // add values 
            options.series[j - 1].data.push(parseFloat(this.innerHTML)); 
           } 
          } 
         }); 
        }); 

        var chart = new Highcharts.Chart(options); 
       } 

       var table = document.getElementById('datatable'), 
     options = { 
      chart: { 
       renderTo: 'container', 
       type: 'pie' 
      }, 
      title: { 
       text: 'Data extracted from a HTML table in the page' 
      }, 
      xAxis: { 
     }, 
     yAxis: { 
      title: { 
       text: 'Units' 
      } 
     }, 
     tooltip: 
     { 
      formatter: function() 
      { 
       return '<b>'+ this.series.name +'</b><br/>'+ 
        this.y +' '+ this.point.name; 
      } 
     }, 
     plotOptions: { 
      pie: { 
       allowPointSelect: true, 
       cursor: 'pointer', 
       dataLabels: { 
        enabled: true, 
        color: '#000000', 
        connectorColor: '#000000', 
        formatter: function() { 
         return '<b>' + this.point.name + '</b>: ' + this.percentage + ' %'; 
        } 
       } 
      } 
     } 
    }; 

       Highcharts.visualize(table, options); 
      }); 

     }); 

    </script> 
</head> 
<body> 
<script src="http://code.highcharts.com/highcharts.js"></script> 
<script src="http://code.highcharts.com/modules/exporting.js"></script> 

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div> 

<table id="datatable" border=1> 
    <thead> 
     <tr> 
      <th>Fruits</th> 
      <th>Qty</th> 

     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <th>Apples</th> 
      <td>3</td> 

     </tr> 
     <tr> 
      <th>Pears</th> 
      <td>2</td> 

     </tr> 
     <tr> 
      <th>Plums</th> 
      <td>5</td> 

     </tr> 
     <tr> 
      <th>Bananas</th> 
      <td>1</td> 

     </tr> 
     <tr> 
      <th>Oranges</th> 
      <td>2</td> 

     </tr> 
    </tbody> 
</table> 
</body> 
</html>

enter image description here

출처

2013-01-25 IT_INFOhUb

당신은 x 축 '카테고리 필드를 통해 조각의 이름을주지해야한다. 슬라이스 이름은 데이터 객체에 포함되어야합니다. 이 시도 :

sliceNames = []; 
$('tbody th', table).each(function (i) 
{ 
    sliceNames.push(this.innerHTML); 
}); 

options.series[j - 1].data.push({name: sliceNames[i - 1], y: parseFloat(this.innerHTML)});

당신은 그냥 배열 변수에 슬라이스 이름을 채우고 데이터를 누르면서 것을 사용 범주에서 모든 개체를 필요가 없습니다. // jsfiddle :

출처

2013-01-25 13:01:45 cubbuk

일 [JSFiddle] (HTTP 나는 HighChart 꽤 새로운 해요,하지만 당신은 같은 것을 사용하여 툴팁 또는 dataLabel의 출력을 포맷 할 수 .net/V248t /) –

감사합니다. =) – cubbuk

감사합니다. 그래, 이걸 시험해 볼거야. –

...

this.series.name = this.series.chart.options.xAxis[0] 
         .categories[this.series.processedYData.indexOf(this.y)];

출처

2013-05-30 21:07:16 Steve

원형 차트 (하이 차트)로 html 테이블에서 텍스트를 가져 오는 방법은 무엇입니까?

답변

관련 문제