如何在Highcharts的序列点上放置dataLabel

Question

我正在尝试创建一个看起来像attached image的图表。

我已经通过使用项目符号图表非常接近了，我试图将箭头图像dataLabel放置在序列点上，但是有时它会指向该点的右侧或左侧。我的目的是使系列颜色透明，并用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

根据您对此图表数据的严格程度（换句话说，箭头沿着图表所在的位置以及如何测量彩色区域），可以使用绘图带和线标记来模拟此图像

请参见下面的我的摘录（或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>