1
나는 고체 게이지 차트를 정의하고 간단한 HTML 컨테이너에서 실행하면 잘 작동솔리드 게이지 차트 페이지에서 일련의 렌더링을 잃고/컨테이너의 크기를 조정 [겨-highcharts + 각도]
확인이 JS Fiddle here
그러나 각도 및 ng- 하이 차트와 통합하면 계열 데이터의 렌더링이 손실됩니다.
확인이 JS Fiddle here
예상보기 :
크기 조정 후 (대부분의 시간을 렌더링하는 동안) :
이 문제를 해결하는 데는 많은 시간을 할애하여 해결할 수 있습니다. 감사합니다. .
//See: https://github.com/pablojim/highcharts-ng
var myapp = angular.module('myapp', ["highcharts-ng"]);
myapp.controller('myctrl', function ($scope) {
$scope.chartConfig = {
options: {
chart: {
renderTo: 'container',
type: 'solidgauge',
height:100,
width:100,
spacingTop: 0,
spacingRight: 0,
spacingBottom: 0,
spacingLeft: 0,
plotBorderWidth: 0,
marginRight: 0, //-60, //this does move the chart but you'll need to recompute it
marginLeft: 0, //-60, //whenever the page changes width
marginTop: 0,
marginBottom: 0
},
tooltip: {
enabled: false
},
title: {
text: ''
},
credits: {
enabled: false
},
pane: {
size: '99%',
startAngle: 0,
endAngle: 360,
background: {
//innerRadius: '50%', #fix for inner border :D
outerRadius: '101%',
backgroundColor: '#ffffff',
}
},
plotOptions: {
solidgauge: {
dataLabels: {
enabled: false,
}
}
},
yAxis: {
labels: {
enabled: false
},
min: 0,
max: 100,
gridLineColor: 'transparent',
lineColor: 'transparent',
minorTickLength: 0,
tickInterval: 67, //supply value from API
tickPositions: [67], //from api 67%
tickColor: '#000000',
tickPosition: 'outside',
tickLength: 4,
tickWidth: 1,
},
},
series:[{
innerRadius: '70%',
data: [{y:55,color:'red'}],
radius: '55%'
}, {
innerRadius: '85%',
data: [{y:55,color:'orange'}],
radius: '70%'
}, {
innerRadius: '100%',
radius: '85%',
data: [{y:25,color:'green'}],
}, {
innerRadius: '101',
data: [{y:57,color:'black'}]
}],
loading: false
}
});
우연히 이것에 대해 뭔가를 찾았습니까? – Seiyria