我正在构建垂直仪表,但在应用自定义图像代替默认标记时遇到问题。
虽然图像呈现,但它的位置是关闭的。我似乎无法让它准确指向标记所在的位置,而且我不确定将静态偏移值应用于“y”属性是否是正确的方法。
这是一个 fiddle .
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
marginBottom: 25,
marginTop: 70,
marginLeft: 65,
marginRight: 10,
},
xAxis: {
categories: ['One'],
lineColor: 'white',
labels: {
enabled: false
},
tickLength: 0,
min: 0,
max: 2
},
plotOptions: {
column: {
stacking: 'normal',
animation: false,
borderWidth: 0,
}
},
yAxis: {
min: 0,
max: 9026,
tickInterval: 9026,
tickLength: 0,
tickWidth: 0,
tickColor: '#C0C0C0',
gridLineColor: '#C0C0C0',
gridLineWidth: 0,
minorTickInterval: 25,
minorTickWidth: 0,
minorTickLength: 0,
minorGridLineWidth: 0,
title: null,
labels: {
formatter: function () {
if (this.isFirst || this.isLast) {
return this.value;
}
},
x: 0
},
},
legend: {
enabled: false
},
series: [
{
data: [4513],
color: {
linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
stops: [
[0, 'red'],
[1, 'orange']
]
}
},
{
data: [4513],
color: {
linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
stops: [
[0, 'orange'],
[1, 'green']
]
}
},
{
type: 'scatter',
data: [3120],
marker: {
enabled: true,
symbol: 'circle'
},
dataLabels: {
useHTML: true,
formatter: function () {
return '<img width="40px" height="40px" src="http://icongal.com/gallery/image/57585/small_arrow_black_monotone_left.png" />'
},
enabled: true,
align: 'right',
x: -3,
y: 2,
overflow: "justify"
}
}
]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="width: 178px; height: 242px;"></div>
非常感谢任何帮助,谢谢!
最佳答案
您应该通过 x, y 属性调整图像位置。
x: 0,
y: 30,
示例:https://jsfiddle.net/ptezqnbf/1/
或者更好,使用 renderer.image并直接控制位置。
function renderImage() {
var chart = this,
point = chart.get('point'),
imgWidth = 40,
imgHeight = 40;
if (!chart.dataLabelImg) {
chart.dataLabelImg = this.renderer.image('http://icongal.com/gallery/image/57585/small_arrow_black_monotone_left.png', -1000, -1000, imgWidth, imgHeight).add(point.series.dataLabelsGroup);
}
chart.dataLabelImg.attr({
x: point.graphic.x + (imgWidth - 15) / 2,
y: point.graphic.y - (imgHeight - 10) / 2
});
关于javascript - Highcharts - 仪表图表数据标签定位不正确,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41318117/