Question

当我将鼠标悬停在任何蜡烛上时，我希望使用股票图表在Highcharts中打开绿色的水平线，在关闭时红色的水平线。您可以在需要添加上述功能的工作示例中试玩。

https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/stock/demo/candlestick/

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/data.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>

<div id="container" style="height: 400px; min-width: 310px"></div>


Highcharts.getJSON('https://demo-live-data.highcharts.com/aapl-ohlc.json', function (data) {

    // create the chart
    Highcharts.stockChart('container', {


        rangeSelector: {
            selected: 1
        },

        title: {
            text: 'AAPL Stock Price'
        },

        series: [{
            type: 'candlestick',
            name: 'AAPL Stock Price',
            data: data,
            dataGrouping: {
                units: [
                    [
                        'week', // unit name
                        [1] // allowed multiples
                    ], [
                        'month',
                        [1, 2, 3, 4, 6]
                    ]
                ]
            }
        }]
    });
});

Answer 1

十字准线始终指示close值。如果您还想在open值上显示一行，则可以使用以下插件：

(function(H) {
    function removeCustomCrosshair(axis) {
        if (axis.customCross) {
            axis.customCross.remove();
        }
    }

    H.addEvent(H.Axis, 'afterDrawCrosshair', function(event) {
        var point = event.point,
            translateY;

        if (this.customCross) {
            removeCustomCrosshair(this);
        }

        if (this.coll === 'yAxis' && this.cross) {
            this.customCross = this.cross.element.cloneNode(true);
            this.gridGroup.element.appendChild(this.customCross);

            translateY = point.plotOpen - point.plotClose;

            this.customCross.setAttributeNS(
                null, "transform", "translate(" + 0 + "," + translateY + ")"
            );
        }
    });

    H.addEvent(H.Axis, 'afterHideCrosshair', function(event) {
        removeCustomCrosshair(this);
    });
}(Highcharts));

实时演示： http://jsfiddle.net/BlackLabel/9dz53p2b/

文档： https://www.highcharts.com/docs/extending-highcharts/extending-highcharts

Answer 2

在系列价格上添加此价格将给出高价或低价之一的水平线。

yAxis: {
  crosshair: {
    label: {
      enabled: true
    }
  }
}

水平线在烛台的烛台的开和高

2 个答案: