在垂直线的所有点上显示工具提示

时间:2019-05-14 00:16:22

标签: highcharts tooltip line

我需要在上面绘制带有工具提示的plotLine。 api无法提供绘图线的工具提示。 我可以画一条线,一条垂直线并为其制作工具提示,因此由于某种原因,只显示了一个工具提示点,即使我在行中也有多个点,因此我希望在用户移动鼠标时能够有多个不同的工具提示在它上面。

以下代码可显示仅显示一个点/标记-https://jsfiddle.net/Lftwjymc/

代码副本:

Highcharts.chart('container', {
    xAxis: {
        type: 'datetime'
    },

    series: [{
        data: [
            [Date.UTC(2010, 0, 1), 29.9],
            [Date.UTC(2010, 0, 1), 71.5],
            [Date.UTC(2010, 0, 1), 75.5],
            [Date.UTC(2010, 0, 1), 80.5],
            [Date.UTC(2010, 0, 1), 106.4]
        ]
    }]
});

我的代码是api-https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/series/data-array-of-arrays-datetime/的示例的微小修改(仅使行垂直)

如何用工具提示在图表中显示所有点(系列中的点)? 它适用于非垂直系列,但一个系列变为垂直时仅显示一个点。

或者,如何在绘图线上制作工具提示?

2 个答案:

答案 0 :(得分:1)

您可以通过以下方法之一轻松实现它:

  1. 使用plotLine显示直线,并使用scatter系列分别绘制每个点:

代码:

Highcharts.chart('container', {
  xAxis: {
    type: 'datetime',
    plotLines: [{
        color: '#FF0000',
        value: Date.UTC(2010, 0, 1),
      width: 1
    }]
  },
  series: [{
    type: 'scatter',
    data: [
      [Date.UTC(2010, 0, 1), 29.9],
      [Date.UTC(2010, 0, 1), 71.5],
      [Date.UTC(2010, 0, 1), 75.5],
      [Date.UTC(2010, 0, 1), 80.5],
      [Date.UTC(2010, 0, 1), 106.4]
    ]
  }]
});

演示:

API:


  1. 创建两个具有相同数据点的序列linescatter

代码:

const data = [
  [Date.UTC(2010, 0, 1), 29.9],
  [Date.UTC(2010, 0, 1), 71.5],
  [Date.UTC(2010, 0, 1), 75.5],
  [Date.UTC(2010, 0, 1), 80.5],
  [Date.UTC(2010, 0, 1), 106.4]
];

Highcharts.chart('container', {
  xAxis: {
    type: 'datetime'
  },
  series: [{
    linkedTo: 'main',
    data: data
  }, {
    type: 'scatter',
    id: 'main',
    name: 'Series',
    data: data
  }]
});

演示:

答案 1 :(得分:0)

基于Wojciech Chmiel的回答-https://stackoverflow.com/a/56124122/1015848

我能够使用工具提示制作垂直线: 这是示例-https://jsfiddle.net/05bwkzma/

它看起来像: vertical line with tooltips

关键项目: 使用散点图; 使用链接到散点图的线图; 散点图应具有marker.enabled = false和status.hover.enabled = false [example]

代码:

const data = [
  [Date.UTC(2010, 0, 1), 29],
  [Date.UTC(2010, 0, 1), 30],
  [Date.UTC(2010, 0, 1), 31],
  [Date.UTC(2010, 0, 1), 32],
  [Date.UTC(2010, 0, 1), 33]
];

Highcharts.chart('container', {
  xAxis: {
    type: 'datetime'
  },
  series: [{
    linkedTo: 'main',
    data: data
  }, {
    type: 'scatter',
    id: 'main',
    name: 'Series',
    marker: {
      enabled: false,
      states: {
        hover: {
          enabled: false
        }
      }
    },
    data: data
  }]
});