2017-09-05 1 views
0

하이 차트를 사용하여 트리 맵을 만들었지 만 위쪽 및 왼쪽 테두리가 누락되었습니다. 나는 문서를 통해 읽었지만 도움이 될만한 것을 찾을 수 없다.하이 차트 트레픽 위쪽 및 왼쪽 테두리 누락

나는 코데 핀을 만들었습니다. here. 검정색 배경에 대해 시리즈의 상단 및 왼쪽면에있는 경계선이 보이지 않는 것을 볼 수 있습니다. 나는 그들이 거기에 있다고 생각하지만 아마 차트가 픽셀에 의해 X/Y에서 상쇄 될 수도 있습니다.

Highcharts.setOptions({ 
 
    colors: ['#263542', '#3d4d5d', '#41474d', '#515961', '#292e33', '#24445e'], 
 
    lang: { 
 
    thousandsSep: ',' 
 
    } 
 
}); 
 

 
Highcharts.chart('treemap', { 
 
    chart: { 
 
    backgroundColor: 'rgba(255,255,255,0)', 
 
    borderColor: 'rgb(255,255,255)' 
 
    }, 
 
    credits: { 
 
    enabled: false 
 
    }, 
 
    plotOptions: { 
 
    series: { 
 
     colorByPoint: true, 
 
     borderColor: 'rgb(71, 116, 135)', 
 
     borderWidth: 1, 
 
     dataLabels: { 
 
     enabled: true, 
 
     style: { 
 
      textOutline: 'none', 
 
      fontFamily: 'Roboto', 
 
      fontWeight: '300', 
 
      fontSize: '1rem' 
 
     } 
 
     } 
 
    } 
 
    }, 
 
    tooltip: { 
 
    valuePrefix: '£' 
 
    }, 
 
    series: [{ 
 
    type: 'treemap', 
 
    layoutAlgorithm: 'squarified', 
 
    data: [{ 
 
     name: 'Indices', 
 
     value: 230000, 
 
    }, { 
 
     name: 'Forex', 
 
     value: 120000, 
 
    }, { 
 
     name: 'Shares', 
 
     value: 55000, 
 
    }, { 
 
     name: 'Pension', 
 
     value: 55000, 
 
    }, { 
 
     name: 'ISA', 
 
     value: 20000, 
 
    }] 
 
    }], 
 
    title: { 
 
    text: '' 
 
    }, 
 
    legend: { 
 
    enabled: false 
 
    } 
 
});
body { 
 
    background: #000; 
 
} 
 

 
#treemap { 
 
    width: 500px; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<script src="https://code.highcharts.com/modules/treemap.js"></script> 
 
<div id="treemap"></div>

답변

0

축 (xAxis/yAxis)이 트리 맵 차트에 표시되지 않더라도 경계의 왼쪽 및 위쪽 부분을 덮어서 영향을 미칩니다. 작은 값 (예 : 1)을 사용하여 두 축의 offset 속성을 설정하면 그림 영역에서 빠져 나와 테두리 부분이 누락됩니다.

API 참조 :
http://api.highcharts.com/highcharts/yAxis.offset
http://api.highcharts.com/highcharts/xAxis.opposite

예 : 솔루션
http://jsfiddle.net/20oh9c3d/

+0

감사합니다. Highcharts의 예제 트리 맵은 기본적으로 테두리가 누락되어 있습니다 - 응답을 구현해야합니다! –

0

나는 아직 말씀 드릴 수 없습니다, 그래서 이것은 정말하고 대답하지 않습니다. 하지만 borderWidth을 2로 변경하면 테두리가 보입니다. 나에게 이것은 어떤 이유로 엘리먼트의 마진 또는 패딩이 엘리먼트의 왼쪽 상단에있는 테두리를 덮고 있다는 것을 의미한다. 희망이 어떤 방향으로 당신을 가리킬 수 있습니다.

관련 문제