我正在尝试使用高图表(实体表)创建自定义数据拨号。
请帮我 。
我无法像实心表头那样产生箭头端。这是我当前的图表:
更新的代码:请复制代码,将其粘贴到下面提供的小提琴链接中:
$(function() {
var gaugeOptions = {
chart: {
type: 'solidgauge',
height: 80,
width: 120,
backgroundColor: null
},
title: null,
pane: {
center: ['50%', '60%'],
size: '100%',
startAngle: -90,
endAngle: 90,
background: {
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
credits: {
enabled: false
},
tooltip: {
enabled: false
},
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true
}
},
gauge: {
dial: {
baseWidth: 1,
topWidth: 1
},
pivot: {
radius: 3,
borderWidth: 1
}
}
}
};
// The speed gauge
$('#container-speed').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 5,
tickPositions: [],
plotBands: [{ // mark the weekend
color: {
linearGradient: [0, 0, 300, 0],
stops: [
[0.1, '#55BF3B'], // green
[0.2, '#DDDF0D'], // yellow
[0.3, '#DF5353']
]
},
from: 0,
to: 5,
innerRadius: '60%',
outerRadius: '100%',
}],
},
series: [{
name: 'Ship Average',
type: 'gauge',
data: [2],
color: {
linearGradient: [0, 0, 300, 0],
stops: [
[0.1, '#55BF3B'], // green
[0.25, '#DDDF0D'], // yellow
[0.4, '#DF5353']
]
},
dataLabels: {
format: '<span style="font-size:10px;color:grey;">{y} delays</span></div>',
y: 30,
borderWidth: 0
},
tooltip: {
valueSuffix: ' days'
}
}]
}));
});
http://jsfiddle.net/n9gfeor2/29/
预期结果 :
最佳答案
您可以通过包装拨号方法(翻译)和编辑路径来实现它。
point.shapeArgs = {
d: dialOptions.path || [
'M', -rearLength, -baseWidth / 2,
'L',
baseLength, -baseWidth / 2,
radius, -topWidth / 2,
radius - 10, -topWidth / 2 - 10,
'M',
radius, -topWidth / 2,
'L',
radius - 10, -topWidth / 2 + 10,
'M',
radius, -topWidth / 2,
baseLength, baseWidth / 2, -rearLength, baseWidth / 2,
'z'
],
简单的演示:
http://jsfiddle.net/L488w1as/
关于javascript - HighCharts :(实心量规)如何生成带有箭头末端的量表盘。,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/45237517/