Highcharts/Highstock 如何在使用调整后的 OHLC 值绘制的图表的工具提示中显示原始 OHLC 值？

编程问答 2022-09-08

问题描述

此代码段在单独的图中显示了原始 OHLC 和调整后的 OHLC 数据：

<html>
<head>
<title>
  How to show original values in tooltip?
</title>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
</head>
<body>
<div id="chart-container" style="width: 100%; height: 100%; margin: 0 auto"></div>
<pre id="csv" style="display: none">
date,open,high,low,close,volume,ex_dividend,split_ratio,adj_open,adj_high,adj_low,adj_close,adj_volume
2014-05-30,637.98,644.17,628.9,633.0,20143600.0,0.0,1.0,85.783881043984,86.616199022075,84.562968727173,85.114261733663,141005200.0
2014-06-02,633.96,634.83,622.5,628.65,13191100.0,85.243344974207,85.36032666095,83.702413790213,84.529353299948,92337700.0
2014-06-03,628.46,638.74,628.25,637.54,10453900.0,84.503805575257,85.886071942748,84.475568616388,85.724717892068,73177300.0
2014-06-04,637.44,647.89,636.11,644.82,11981500.0,85.711271721178,87.116396579183,85.532437648341,86.70359913286,83870500.0
2014-06-05,646.2,649.3699,642.61,647.35,10850200.0,86.889156291142,87.315386462184,86.406438756191,87.043787256377,75951400.0
2014-06-06,649.9,651.26,644.47,645.57,12497800.0,87.386664614072,87.569532538176,86.656537534745,86.804445414535,87484600.0
2014-06-09,92.7,93.88,91.75,93.7,75414997.0,7.0,87.252202905172,88.362856620685,86.358032540987,88.193434867471,75414997.0
2014-06-10,94.73,95.05,93.57,94.25,62777000.0,89.16290378864,89.464098016576,88.071074712372,88.711112446736,62777000.0
2014-06-11,94.13,94.76,93.47,93.86,45681000.0,88.59816461126,89.191140747509,87.976951516142,88.344031981439,45681000.0
2014-06-12,94.04,94.12,91.9,92.29,54749000.0,88.513453734653,88.588752291637,86.499217335332,86.866297800629,54749000.0
2014-06-13,92.2,92.44,90.88,91.28,54525000.0,86.781586924022,87.007482594974,85.539160733786,85.915653518706,54525000.0
2014-06-16,91.51,92.75,91.45,35561000.0,86.132136870035,87.299264503287,86.075662952297,35561000.0
</pre>
<script type="text/javascript">
Highcharts.stockChart('chart-container',{
  title: {
    text: 'Plot Title',align: 'left',floating: false
  },exporting: {
    enabled: true,sourceWidth: 900,sourceHeight: 600
  },legend: {
    enabled: false,floating: true,verticalAlign: 'top',align:'center'
  },rangeSelector: {
    buttons: [{
      type: 'month',count: 6,text: '6m'
    },{
      type: 'year',count: 1,text: '1y'
    },count: 2,text: '2y'
    },count: 3,text: '3y'
    },count: 4,text: '4y'
    },{
      type: 'all',text: 'All'
    }],selected: 3
  },credits: {
    enabled: false
  },plotOptions: {
    series: {
      visible: false,turboThreshold: 0 // Comment out this code to display error
    },ohlc: {
      color: 'black'
    }
  },data: {
    csv: document.getElementById('csv').innerHTML,firstRowAsNames: false,startRow: 1,seriesMapping: [{
        x: 0,open: 1,high: 2,low: 3,close: 4
    },{
        x: 0,open: 8,high: 9,low: 10,close: 11
    },y: 9
    },y: 10
    }]
  },series: [{
        name: 'Values',type: 'ohlc',// bars
        visible: true,// set color in plotOptions
        tooltip: {
        // set tooltip options here
        }
    },{
        name: 'Adj_Values',{
        name: 'Adj_High',type: 'line',// high
        visible: false,color: 'blue'
    },{
        name: 'Adj_Low',// low
        visible: false,color: 'gray'
    }]
});
</script>
</body>
</html>

如果可能，我想 (1) 使原始 OHLC 情节不可见； (2) 仅绘制调整后的 OHLC 条形图； (3) 在附加到图中显示的调整后的 OHLC 条的工具提示中显示原始 OHLC 值。

我可以找到共享工具提示的示例，但没有关于将调整后的 OHLC 替换为原始 OHLC 数据的选项的信息。或者，我可能想添加原始 OHLC 数据，以在与调整数据图关联的工具提示中显示原始数据和调整数据。

解决方法

您可以禁用第一个系列的 visible 属性，并使用工具提示的格式化程序功能从隐藏系列中查找匹配点并显示其值。

    tooltip: {
        formatter: function(tooltip) {
            const originalFormat = tooltip.defaultFormatter.call(this,tooltip);
            const point = this.points[0].point;
            const originalPoint = tooltip.chart.series[0].points.find(
                p => p.x === point.x
            );

            originalFormat[1] = `<span style="color:black">●</span> <b> ${point.series.name}</b><br/>Open: ${originalPoint.open}<br/>High: ${originalPoint.high}<br/>Low: ${originalPoint.low}<br/>Close: ${originalPoint.close}<br/>`;
            return originalFormat;

        }
    },series: [{
        name: 'Values',type: 'ohlc',visible: false
    },{
        name: 'Adj_Values',visible: true
    },...]

现场演示： http://jsfiddle.net/BlackLabel/k2mhvdp6/

API 参考： https://api.highcharts.com/highcharts/tooltip.formatter

highchartshighchartssharedtooltiptooltiptooltip