하이 차트의 범례 항목 주위에 테두리가 있습니다.

Question

하이 차트의 전체 범례 주위에 테두리를 그리는 방법이 있습니다. Highcharts 5.0의 각 범례 항목 주위에 테두리를 그리는 방법은 무엇입니까?

Answer 1

예. 하이 차트에는 Style by CSS이라는 제목의 문서가 있으며 자세한 내용은이 작업을 수행하는 방법에 대해 자세히 설명합니다.

.highcharts-legend-item { 
    border: 1px solid tomato; 
} 

Answer 2

이것은 내가 처음 생각했던 것보다 난이도가 보인다 모양으로

그것은 당신이 그런 짓을 할 수 있습니다합니다. 한 가지 가능한 해결책은 useHTML: true을 에 추가 한 다음 CSS와 의사 요소를 사용하여 스타일을 지정하는 것입니다.

는 useHTML하면 다음과 같은 CSS를 사용하여 스타일 수 :

.highcharts-legend-item { 
padding: 1em; 
} 

.highcharts-legend-item > span { 
position: relative; 
overflow: visible!important; 
} 

.highcharts-legend-item > span:after { 
content: ""; 
position: absolute; 
width: 110%; 
border: 2px solid #ddd; 
padding: 1em 1em 0.5em; 
top: -2px; 
left: -25px; 
border-radius: 10px; 
} 

는 예를 들어이 JS Fiddle를 참조하십시오.

스타일을 조정해야하지만 시작해야합니다.

희망이 도움이됩니다.