파이 그래프의 중심에 텍스트 추가하기 하이 차트

파이 차트의 가운데에 특정 글꼴, 글꼴 크기 및 글꼴 색이있는 텍스트를 추가 한 후입니다. 하이 차트를 사용하여 아래 코드에 대해 어떻게 할 수 있습니까?파이 그래프의 중심에 텍스트 추가하기 하이 차트

다른 게시물을 사용하여이 문제를 해결하기 위해 여러 가지 방법을 시도했지만이 질문에 완전히 답하는 것 같지 않으며 실제로 작동합니다.

이 답변의

$(function() { 
    // Create the chart 
    Highcharts.setOptions({ 
    colors: ['#26d248', '#323232'] 
}); 

    chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'summoner-pie-container', 
      type: 'pie', 
      backgroundColor:'transparent' 

     }, plotOptions: { 

     series: { 
      marker: { 
       states: { 
        hover: { 
         enabled: false 
        } 
       } 
      } 
     }, 

     pie: { 
      borderWidth: 0 
     } 
    }, 


     title: { 
text: '', 
style: { 
    display: 'none' 
} 
}, credits: { 
    enabled: false 
}, exporting: { 
    buttons: { 
     contextButton: { 
      enabled: false 
     }  
    } 
    }, 
    tooltip: { 
      formatter: function() { 
       return '<b>'+ this.point.name +'</b>: '+ this.y; 
      } 
     }, 
     series: [{ 
      data: [["Damage Dealt",34000],["Team Damage Dealt",86423]], 
      size: '60px', 
      innerSize: '70%', 
      dataLabels: { 
       enabled: false 
      } 
     }] 
    }); 


});

출처

2016-10-29 ForsakenHound

모두가 HighCharts 문서 내에서 대답 할 것 : 여기

는 내가 가지고있는 코드입니다. 예를 들어 다음 페이지를 참조하십시오 : HighCharts Documentation on Style.

스타일은 Javascript에서 낙타의 경우 (배경색은 backgroundColor가됩니다)에 액세스되므로 font-family는 fontFamily가됩니다.

Highcharts.setOptions({ 
chart: { 
    style: { 
     fontFamily: 'helvetica' 
    } 
} });

출처

2016-10-30 06:16:05 Matty

당신은 차트의 상단에 사용자 지정 요소를 그릴 렌더러를 사용할 수

: http://api.highcharts.com/highcharts/Element.css

예 :

의 스타일을 변경하는 방법은 SVG 요소에 CSS의 방법을 사용할 수 있습니다 http://api.highcharts.com/highcharts/Renderer

// Render chart 
var chart = Highcharts.chart(options); 

// Create custom text element 
var text = chart.renderer.text('100%').add(), 
    textBBox = text.getBBox(), 
    x = chart.plotLeft + (chart.plotWidth * 0.5) - (textBBox.width * 0.5), 
    y = chart.plotTop + (chart.plotHeight * 0.5) + (textBBox.height * 0.25); 
// Set position and styles 
text.attr({ x: x, y: y }).css({ fontSize: '13px', color: '#666666' }).add();

예 : https://jsfiddle.net/zLhwqnq2/

출처

2016-10-31 15:19:25 stpoa

파이 그래프의 중심에 텍스트 추가하기 하이 차트

답변

관련 문제