Highcharts.js：スクロール可能なinnterText？

コードに基づいてthisハイチャートの例では、特定のタイルをクリックすると、ドーナツサークルの中心にテキストを表示したいと考えています。円の内側にうまく収まらないときに、表示されたテキストをスクロール可能にすることは可能ですか？Highcharts.js：スクロール可能なinnterText？

私がこれまで持って何

$(function() { 
 
    var colors = ['#8d62a0', '#ceb3d8', '#d5dddd']; 
 
    var chart = new Highcharts.Chart({ 
 
     chart: { 
 
      renderTo: 'vacation-time-chart', 
 
      type: 'pie', 
 
      height: 300, 
 
      width: 300, 
 
      borderRadius: 0 
 
     }, 
 
     credits: { 
 
      enabled: false 
 
     }, 
 
     title: false, 
 
     tooltip: { 
 
     formatter: function() { 
 
        return '<b>'+this.y+'</b>'; 
 
        } 
 
       }, 
 
     plotOptions: { 
 
      pie: { 
 
       borderWidth: 6, 
 
       startAngle: 90, 
 
       innerSize: '75%', 
 
       size: '100%', 
 
       shadow: true, 
 
       // { 
 
       //  color: '#000000', 
 
       //  offsetX: 0, 
 
       //  offsetY: 2, 
 
       //  opacity: 0.7, 
 
       //  width: 3 
 
       // }, 
 
       dataLabels: false, 
 
       stickyTracking: false, 
 
       states: { 
 
        hover: { 
 
         enabled: false 
 
        } 
 
       }, 
 
       point: { 
 
       events: { 
 

 
        click: function(){ 
 
         this.series.chart.innerText.attr({text: this.txt}); 
 
        } 
 
       } 
 
       } 
 
      } 
 
     }, 
 

 
     series: [{ 
 
      data: [ 
 
       {y:40, color: colors[0], txt: 'yoyo'}, 
 
       {y:10, color: colors[1], txt: 'dada'}, 
 
       {y:60, color: colors[2], txt: 'this is a longer text that I would like to be scrollable. this is a longer text that I would like to be scrollable. this is a longer text that I would like to be scrollable. this is a longer text that I would like to be scrollable. this is a longer text that I would like to be scrollable.this is a longer text that I would like to be scrollable. this is a longer text that I would like to be scrollable.'} 
 
      ] 
 
      // data: [ 
 
      //  ['Firefox', 44.2], 
 
      //  ['IE7',  26.6], 
 
      //  ['IE6',  20], 
 
      //  ['Chrome', 3.1], 
 
      //  ['Other', 5.4] 
 
      // ] 
 
     }] 
 
    }, 
 
    function(chart) { // on complete 
 

 
     var xpos = '50%'; 
 
     var ypos = '53%'; 
 
     var circleradius = 102; 
 
     var boundingBox; 
 
     var series = chart.series[0]; 
 
     var zones; 
 

 
    // Render the text 
 
    chart.innerText = chart.renderer.label('Articles mentioning XY', 135, 125).add(); 
 
    boundingBox = chart.innerText.getBBox(); 
 
    chart.innerText.css({ 
 
      display:"inline-block", 
 
      position:"absolute", 
 
      top:"1px", 
 
      width: "150px", 
 
      height:"30px", 
 
      color: '#4572A7', 
 
      fontSize: '12px', 
 
      overflow: 'auto', 
 
      textAlign: 'block' 
 

 
     }).attr({ 
 
      // why doesn't zIndex get the text in front of the chart? 
 
      x: series.center[0] - boundingBox.width/2 + chart.plotLeft/2, 
 
      y: series.center[1] + boundingBox.height/2 + chart.plotTop, 
 
      zIndex: 999 
 
     }).add(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>test</title> 
 
    <script src="http://code.highcharts.com/highcharts.js"></script> 
 
</head> 
 
<body> 
 

 
<div id="vacation-time-chart" style="min-width: 300px; height: 300px; margin: 0 auto"></div> 
 
<script src="testfile.js"></script> 
 

 
</body> 
 
</html>

誰もがこれで私を助けていただけますか？ overflow: auto（またはスクロール）をinnterText.cssプロパティに追加することは、ここでの解決策ではないようです。

出典

2016-12-11 dliv

あなたがこれを行うことができます

、

function defineInnerData(name, y, obj) { // on complete 
     var chart=$("#container").highcharts();  
     $("#pieChartInfoText").remove();  
     var textX = chart.plotLeft + (chart.plotWidth * 0.5); 
     var textY = chart.plotTop + (chart.plotHeight * 0.5); 
     var span = '<span id="pieChartInfoText" style="position:absolute; text-align:center;left: 235px;top:210px;width: 130px;">'; 
     span += '<span style="font-size: 15px">'+ y +'</span><br>'; 
     span += '<span style="font-size: 12px">'+ name +'</span>'; 
     span += '</span>'; 

     $("#addText").append(span); 
     span = $('#pieChartInfoText'); 
     span.css('left', textX + (span.width() * -0.5)); 
     span.css('top', textY + (span.height() * -0.5)); 

    } 
    defineInnerData("", "Tap the slices of this chart to see more");

そして内部それを呼び出す、

series: { 
     cursor: 'pointer', 
     point: { 
      events: { 
      mouseOver: function() { 
       console.log(this) 
       defineInnerData(this.name, this.y, this); 
      } 
      } 
     },

DEMO

出典

2016-12-12 03:24:50 Sajeetharan

Sajeetharanは、あなたの助けのためにどうもありがとうございました！私は今、私が望んでいたものを得ました（ 'var span 'のスタイル属性として' overflow：scroll;を追加しなければなりませんでした。） – dliv

申し訳ありませんが、upvoteを忘れました。今完了！ :) – dliv

ありがとうgreqt !!! ：3> – Sajeetharan

Highcharts.js：スクロール可能なinnterText？

答えて

関連する問題