admin管理员组文章数量:1432178
I have to create a semi circular gauge chart using high chart. I have got this one, but this one has a full circular dial. What is required is a semicircular dial, i.e., containing only the upper part of dial.
I have to create a semi circular gauge chart using high chart. I have got this one, but this one has a full circular dial. What is required is a semicircular dial, i.e., containing only the upper part of dial.
Share Improve this question edited Aug 27, 2012 at 13:24 Adi 5,1796 gold badges35 silver badges48 bronze badges asked Aug 27, 2012 at 13:21 ParthParth 1071 gold badge2 silver badges11 bronze badges5 Answers
Reset to default 2You can add center parameter to pane section,
pane : {
center: ['50%', '100%']
...
}
See the modified demo, http://jsfiddle/EjRLw/524/
Refer to API at High chart http://api.highcharts./highcharts#pane.center
pane: {
startAngle: -90,
endAngle: 90,
background:[]
},
That should do it.
Change the last function like this and you will have upper part of the full dial
// Add some life
function(chart) {
setInterval(function() {
var point = chart.series[0].points[0],
newVal, inc = 100;
newVal = inc;
if (newVal < 0 || newVal > 100) {
newVal = 50;
}
point.update(newVal);
}, 3000);
});
You can set the background shape to arc e.g.
pane:{
background:{
...
shape:'arc'
...
}
}
Then use this CSS to remove space below the semicircle
.chatcontainer > div {
margin-bottom: -35% !important
}
.chatcontainer > div.highcharts-container > svg {
margin-bottom: -35%; max-height: 65% !important;
}
Highcharts.chart('SemiCircularGauge', {
chart: {
type: 'gauge',
backgroundColor: '#e8e8e8',
plotBackgroundColor: {
stops: [
[0, '#FFF4C6'],
[50, '#FFFFFF'],
[100, '#FFF4C6']
]
},
height: 250
},
title: {
text: 'Semi Circular Gauge',
verticalAlign: 'bottom'
},
pane: [{
startAngle: -90,
endAngle: 90,
background: null,
center: ['50%', '100%'],
size: 300
}, {
startAngle: -90,
endAngle: 90,
background: null,
center: ['50%', '100%'],
size: 50
}],
exporting: {
enabled: true
},
tooltip: {
enabled: true
},
yAxis: [{
min: 0,
max: 100,
minorTickPosition: 'outside',
tickPosition: 'outside',
labels: {
rotation: 'auto',
distance: 20
},
plotBands: [{
from: 0,
to: 20,
color: "#A45D5B"
}, {
from: 20,
to: 40,
color: "#C7A46F"
}, {
from: 40,
to: 60,
color: "#D0BF94"
}, {
from: 60,
to: 80,
color: "#71AA8D"
}, {
from: 80,
to: 100,
color: "#3E7873"
}],
//pane: 0,
title: {
text: '<span style="font-size:8px">Semi Circular Gauge</span>',
y: -20
}
}, {
min: 0,
max: 100,
minorTickPosition: 'outside',
tickPosition: 'outside',
labels: {
rotation: 'auto',
distance: 20
},
plotBands: [{
from: 0,
to: 20,
innerRadius: '100%',
outerRadius: '105%',
color: "#A45D5B"
}, {
from: 20,
to: 40,
innerRadius: '100%',
outerRadius: '105%',
color: "#C7A46F"
}, {
from: 40,
to: 60,
innerRadius: '100%',
outerRadius: '105%',
color: "#D0BF94"
}, {
from: 60,
to: 80,
innerRadius: '100%',
outerRadius: '105%',
color: "#71AA8D"
}, {
from: 80,
to: 100,
innerRadius: '100%',
outerRadius: '105%',
color: "#3E7873"
}],
pane: 1,
title: {
text: ''
}
}],
plotOptions: {
gauge: {
dataLabels: {
enabled: false
},
dial: {
radius: '100%'
}
}
},
credits: {
enabled: false
},
series: [{
name: 'Semi Circular Gauge',
data: [68],
yAxis: 0
}, {
name: 'Semi Circular Gauge',
data: [68],
yAxis: 1
}]
},
function (chart) {
if (!chart.renderer.forExport) {
setInterval(function () {
var point = chart.series[0].points[0],
newVal,
inc = 0;
newVal = point.y + inc;
if (newVal < 0 || newVal > 100) {
newVal = point.y - inc;
}
point.update(newVal);
}, 3000);
}
});
本文标签： javascriptHow to create a semi circular gauge using high chartStack Overflow
版权声明：本文标题：javascript - How to create a semi circular gauge using high chart? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745586924a2664963.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论