Highcharts：显示工具提示，在十字线处显示计算值

new9mtju 于 2022-11-10 发布在 Highcharts

关注(0)|答案(1)|浏览(182)

我希望在鼠标位置有工具提示，而不仅仅是在“真实的”数据（所以不是得到系列数据，而是计算的数据）。
这怎么办？
(the真实的数据是不同的，不是一条直线，就像在拉小提琴）

Highcharts.stockChart('container', {

  xAxis: {
    type: 'datetime',
    startOnTick: false,
    endOnTick: false,
    tickInterval: 360 * 24 * 3600 * 1000,
    crosshair: {
      snap: true,
    },
  },

  tooltip: {
    split: false,
    shared: true,
  },

  legend: {
    enabled: true,
    layout: 'proximate',
    align: 'right',
    itemStyle: {
      color: '#000000',
      fontWeight: 'bold',
      fontSize: '10px',
    }
  },

  series: [{
      name: 'Line1',
      data: [{
          x: (new Date("2000-05-12")).getTime(),
          y: 0
        },
        {
          x: (new Date("2050-05-12")).getTime(),
          y: 100
        },
      ]
    },
    {
      name: 'Line2',
      data: [{
          x: (new Date("2000-05-12")).getTime(),
          y: 100
        },
        {
          x: (new Date("2050-05-12")).getTime(),
          y: 0
        },
      ]
    }
  ]
});

https://jsfiddle.net/nowo/09br3g6m/7/

highcharts

来源：https://stackoverflow.com/questions/72067979/highcharts-showing-tooltip-with-calculated-value-at-crosshair

1条答案

按热度按时间

szqfcxe21#

您需要有十字准线可以参考的点，就像example上一样。
若要编辑要显示的选项，您可以选择使用xAxis.labels.formatter。

xAxis: {
  crosshair: {
    labels: {
      enabled: true,
      shape: 'rect',
      //format:'{value:%d%y}',
      backgroundColor: 'rgb(255,0,0)',
      formatter: function(value) {
        return 'label: ' + value;
      }
    },
  }
},
yAxis: {
  opposite: true,
  crosshair: {
    label: {
      enabled: true,
      //format: '{value:.2f}',
      shape: 'rect',
      padding: 2,
      formatter: function(number) {
        console.log('here is the numer', number);
        return 'test ' + number;
      }
    }
  },
  labels: {
    align: 'left',
    format: '{value:.2f}',
    y: 6,
    x: 2
  }
},

现场演示：https://jsfiddle.net/BlackLabel/8cdyh253/1/

赞(0）回复(0）举报 2022-11-10

我来回答

Highcharts：显示工具提示，在十字线处显示计算值

1条答案

相关问题

热门标签

最新问答