echart.. 그래프만 회전을 어떻게 시키나요? 도저히모르겠습니다ㅠ

Question

echart로 8각형 차트를 구현하고 있습니다..목적은 현재 이런 모양이 나와야 하는데요8각형 차트는 대략 이런식으로 만들었습니다 var chartDom = document.getElementById('test_chart'); var myChart = echarts.init(chartDom, null, { renderer: 'svg' }); option = { grid: { left:0, right:0, top:0, bottom:0, }, radar: { indicator: [ { name: '목록1', value : "나쁨", max: 100, axisLabel: { //그래프 내부 수치 show: false, //그래프 구획 indicator color: "#000", fontWeight: '600', fontSize: 10, align: "center", padding:[0,0,0,18], fontFamily: "HalvarBreit" } }, { name: '목록2', value : "나쁨", max: 100}, { name: '목록3', value : "나쁨", max: 100}, .... ], center: ["52%","50%"], radius: 200, series: [ { animation: false, type: 'radar', showArea: true data: [ { value: [ 46.1, 15.5, 7.6, 26.2, 46.2, 58.8, 11.8, 41.8], areaStyle: { color: "#FFF4EA",// Specify the desired color and opacity } } ], } ] }; option && myChart.setOption(option);차트영역 div 전체를 rotate시키니

이런식으로 돌아가네요어떻게 하면 차트만 돌아가고 나머지 글자들은 그대로일 수 있을까요?또한 저렇게 끝이 약간 구부러진 모양은 어떻게 구현할 수 있을까요? 지금은 끝이 뾰족하게 나오네요....javascript 고수님들께서 도움주시면 감사하겠습니다...챗지피티도 대답을 제대로 못해주네요ㅠㅠㅠ

띠로릴링 · Answer

startAngle 을 추가하셔서 축 시작각도를 수정하시면 label의 각도 조절할 필요없이 해결될 것 같네요 // 라벨의 배경색 크기를 크게 설정 option.radar.name &#61; { textStyle: { color: '#333', backgroundColor: 'rgba(255, 0, 0, 0.5)', // 배경색 설정 borderRadius: 10 // 라운드 처리를 위한 값 설정 }, padding: [8, 12] };

roggue2 · Answer

chart.js 검색하셔서 라이브러리 가져다 입맛에 맞게 수정하시면 될 듯 합니다.https://www.chartjs.org/docs/latest/samples/other-charts/radar.html

O-h-y-o · Answer

Echarts Radar 에서는 'square'와 'circle' 이 두개를 제공하는것 같고 따로 둥글게 한다던지의 속성은 없어 보입니다. 둥글게한 예제가 있다면 링크주시면 감사하겠습니다.차트를 왜 돌리려고 하시는건지는 잘 모르겠지만.. 나쁨이나 보통의 영역에 데이터를 맞추시려고 돌리시는것 같은데indicator의 순서와 데이터의 순서를 일치시키시면 될것같네요.

echart.. 그래프만 회전을 어떻게 시키나요? 도저히모르겠습니다ㅠ

3개의 답변

Q&A 목록