将值传递给y轴系列,如下所示:

this.chartOptions = {
  series: [
    {
      type: 'line',
      data: [
            [0,38.6],
            [0,49.8],
            [1,39.2],
            [1,41.1],
            [1,46.6],
            [2,44]
        ],
      color: '#004191',
      showInLegend: false,
      name: 'price',
      threshold: 40,
      negativeColor: '#F34336',
      marker: {
        enabled: true,
        radius: 3,
        symbol: 'circle',
      },
    },
  ],
  title: {
    text: '',
  },
  xAxis: {
    title: {
      text: 'Days',
    },
    categories: ["16-Jan", "15-Jan", "14-Jan"],
  },
  yAxis: {
    title: {
      text: 'price',
    },
    gridLineWidth: 1,
    min: 10,
    max: 100,
    tickPixelInterval: 35,
  },
  exporting: {
    enabled: false,
    showTable: false,
    buttons: {
      contextButton: {
        menuItems: ['downloadPDF'],
      },
    },
  },
  credits: {
    enabled: false,
  },
};

但问题是,视图中呈现了多个值,但当鼠标悬停在特定值时,这些值不会显示在工具提示中.

当我将鼠标悬停在49.8上时,它会显示工具提示,但不会显示38.6.尽管它们属于第一系列y轴.

enter image description here

需要配料:

  1. 鼠标悬停时应显示y轴工具提示中的每个值.
  2. 我需要在工具提示中显示多个值(例如,Display、rtMode、initMode).

安装Stackblitz ref

推荐答案

这可以通过以下步骤实现:

  • 首先,使用散点类型而不是线条系列.只需设置lineWidth: 2即可模拟线列.

  • 接下来,通过headerFormat(以使用与原始线条系列相同的方式)和更高级的pointFormatter调整工具提示:

    tooltip: {
         headerFormat: '<span style="font-size: 0.8em">{point.key}</span><br/>',
         pointFormatter() {
           let pointFormat = '',
           hoveredPoint = this;
    
           this.series.points.forEach(point => {
             if (point.x === hoveredPoint.x) {
               pointFormat += `<span style=\"color:${point.color}\">●</span> ${point.series.name}: <b>${point.y}</b><br/>`
             }
           })
           return pointFormat
         }
       },
    

Demo:. https://jsfiddle.net/BlackLabel/ts7bcjwo/.

API Reference:. https://api.highcharts.com/highcharts/tooltip.pointFormatter.

Javascript相关问答推荐

在JavaScript中检索一些文本

主要内部的ExtJS多个子应用程序

RxJS setTimeout操作符等效

如何为GrapesJS模板编辑器创建自定义撤销/重复按钮?

如何调用名称在字符串中的实例方法?

使用Promise.All并发解决时,每个promise 的线性时间增加?

正则表达式,允许我匹配除已定义的子字符串之外的所有内容

如何将未排序的元素追加到数组的末尾?

JavaScript是否有多个`unfined`?

元素字符串长度html

令牌JWT未过期

postman 预请求中的hmac/sha256内标识-从js示例转换

React Refs不与高阶组件(HOC)中的动态生成组件一起工作

如何让SVG图标在被点击和访问后改变 colored颜色 ,并在被访问后取消点击时恢复到原来的 colored颜色 ?

Django模板中未加载JavaScript函数

限制数组中每个元素的长度,

暂停后只有一次旋转JS

使用Java脚本筛选数组中最接近值最小的所有项

Js问题:有没有办法将数据从标记表转换成图表?

为什么我的Reaction组件不能使用createBrowserRouter呈现?