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

Question

此代码段在不同的图中显示了原始 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,0.0,1.0,85.243344974207,85.36032666095,83.702413790213,84.529353299948,92337700.0
2014-06-03,628.46,638.74,628.25,637.54,10453900.0,0.0,1.0,84.503805575257,85.886071942748,84.475568616388,85.724717892068,73177300.0
2014-06-04,637.44,647.89,636.11,644.82,11981500.0,0.0,1.0,85.711271721178,87.116396579183,85.532437648341,86.70359913286,83870500.0
2014-06-05,646.2,649.3699,642.61,647.35,10850200.0,0.0,1.0,86.889156291142,87.315386462184,86.406438756191,87.043787256377,75951400.0
2014-06-06,649.9,651.26,644.47,645.57,12497800.0,0.0,1.0,87.386664614072,87.569532538176,86.656537534745,86.804445414535,87484600.0
2014-06-09,92.7,93.88,91.75,93.7,75414997.0,0.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,0.0,1.0,89.16290378864,89.464098016576,88.071074712372,88.711112446736,62777000.0
2014-06-11,94.13,94.76,93.47,93.86,45681000.0,0.0,1.0,88.59816461126,89.191140747509,87.976951516142,88.344031981439,45681000.0
2014-06-12,94.04,94.12,91.9,92.29,54749000.0,0.0,1.0,88.513453734653,88.588752291637,86.499217335332,86.866297800629,54749000.0
2014-06-13,92.2,92.44,90.88,91.28,54525000.0,0.0,1.0,86.781586924022,87.007482594974,85.539160733786,85.915653518706,54525000.0
2014-06-16,91.51,92.75,91.45,92.2,35561000.0,0.0,1.0,86.132136870035,87.299264503287,86.075662952297,86.781586924022,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'
    }, {
      type: 'year',
      count: 2,
      text: '2y'
    }, {
      type: 'year',
      count: 3,
      text: '3y'
    }, {
      type: 'year',
      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
    }, {
        x: 0,
        y: 9
    }, {
        x: 0,
        y: 10
    }]
  },
  series: [{
        name: 'Values',
        type: 'ohlc', // bars
        visible: true,
        // set color in plotOptions
        tooltip: {
        // set tooltip options here
        }
    }, {
        name: 'Adj_Values',
        type: 'ohlc', // bars
        visible: true,
        // set color in plotOptions
        tooltip: {
        // set tooltip options here
        }
    }, {
        name: 'Adj_High',
        type: 'line', // high
        visible: false,
        color: 'blue'
    }, {
        name: 'Adj_Low',
        type: 'line', // low
        visible: false,
        color: 'gray'
    }]
});
</script>
</body>
</html>

如果可能的话，我想（1）让原来的OHLC图不可见； (2) 仅绘制调整后的 OHLC 条；和 (3) 在附加到图中显示的调整后 OHLC 条的工具提示中显示原始 OHLC 值。

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

Answer 1

您可以为第一个系列禁用 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',
        type: 'ohlc',
        visible: true
    }, ...]

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

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

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

Highcharts/Highstock How to show original OHLC values in tooltip for chart drawn using adjusted OHLC values?

highcharts

tooltip

shared