如何将dataLabels放在Highcharts中的系列点上

Question

我正在尝试创建一个类似于attached image 的图表。

通过使用子弹图，我已经非常接近了，我试图将箭头图像 dataLabel 定位在系列点上，但它有时会移动到该点的右侧或左侧。我的意图是让系列颜色透明并让数据标签在视觉上替换扩展条。不是目标栏，而是系列栏本身。购买我的图片未完全放在系列中的点上，或者是否有其他方法可以在系列点的顶部使用图像或图标？

plotOptions: {
    series: {
        dataLabels: {
        enabled:true,
        useHTML:true,
      x: -3,
      y: 35,
        format: '<img src="https://image.ibb.co/cqabM8/g3.png">'
    },
        pointPadding: 0.25,
        borderWidth: 0,
        color: '#000',
        targetOptions: {
            width: '300%'
        }
    }
}

Here是一个JSFiddle，用来尝试定位箭头...

Answer 1

根据您对此图表数据的严格程度（换句话说，箭头在图表上的位置以及彩色区域的测量方式），有一种方法可以使用绘图带和线标记来模拟此图像.

见下面我的 sn-p（或https://jsfiddle.net/brightmatrix/r78vz49a/ 的小提琴）。

我使用绘图带沿着 0 到 100 的轴创建彩色区域（例如，假设 0% 是新鲜的，而 100% 是完全腐烂/不可食用的）。

然后，有两个系列：一个带有形成箭头的标记，第二个只是一条垂直线；两者都完成了箭头。只要您保持箭头和直线的 x 轴值一致，箭头就会沿着直线“移动”。

我隐藏了 y 轴标签，因为它们与您的图表无关。如果需要，您还可以隐藏 x 轴标签并将绘图带标签移动到图表下方。

以下是最终产品的屏幕截图。我希望这些信息对您解决这一挑战有所帮助。

Highcharts.chart('container', {
  title: { text: 'Freshness scale' },
  xAxis: {
    plotBands: [{
      color: 'rgba(0,255,0,0.5)',
      from: 0,
      to: 33,
      label: { text: 'Fresh', align: 'center', x: -10 }
    },{
      color: 'rgba(255,255,0,0.5)',
      from: 33,
      to: 67,
      label: { text: 'Stale', align: 'center', x: -10
             }
    },{
      color: 'rgba(255,0,0,0.5)',
      from: 67,
      to: 100,
      label: { text: 'Moldy', align: 'center', x: -10
             }
    }],
    min: 0, 
    max: 100
  },
  yAxis: {
    min: 0,
    max: 1,
    tickInterval: 1,
    title: { text: '' }, 
    labels: { enabled: false }
  },
  legend: { enabled: false },
  tooltip: { enabled: false },
  series: [{
    name: 'Freshness arrow',
    data: [{x: 55, y: 0}],
    lineWidth: 0, 
    color: 'black',
    marker: { symbol: 'triangle-down', radius: 10, y: -10 }
  },{
    name: 'Freshness line',
    data: [{x: 55, y: 0},{x: 55, y: 0.5},],
    lineWidth: 4,
    color: 'black'
  }]
});

#container {
	min-width: 310px;
	max-width: 800px;
	height: 150px;
	margin: 0 auto
}

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container"></div>