javascript - Highstock - 如何在折线图或面积图工具提示中显示开盘价、最高价、最低价、收盘价

Question

我试图在折线图或面积图的工具提示中显示开盘价、最高价、最低价和收盘价。现在，折线图和面积图的数据正在 JSON 数组中发送，如下所示

{timestamp, close}

现在对于 OHLC 或烛台图表，此 JSON 更改为

{timestamp,open, high, low, close}

我试过这种方法，它只适用于 OHLC 和烛台。

tooltip: {
                    valueDecimals: 2,
                    useHTML: true,
                    formatter: function() {



                        /*
                         * tooltip formatter function
                         * 
                         */
                        var d = new Date(this.x);
                        var s = '';

                        if (chartGlobalOptions.range.indexOf("m") >= 0) {

                            s += '<b>' + Highcharts.dateFormat('%b %e, %Y', this.x) + '</b><br />';

                        } else {

                            s += '<b>' + Highcharts.dateFormat('%b %e, %Y [%H:%M]', this.x) + '</b><br />';

                        }


                        $.each(this.points, function(i, point) {
                            if (point.series.name.indexOf("Volume") >= 0) {

                                /*
                                 * if the series is volume, then don't show the decimals
                                 * 
                                 */
                                s += '<b><span style = "color:' + point.series.color + ';">' + point.series.name + ' </span>' + ' : ' + Highcharts.numberFormat(point.y, 0) + '</b><br />';
                            } else if (point.series.type == 'candlestick' || point.series.type == 'ohlc')  {

                                s += '<b><span style = "color:' + point.series.color + ';">' + point.series.name  + ' : ' + Highcharts.numberFormat(point.point.close, 3) + '</b><br />';
                                s += '<span style ="color:' + point.series.color + ';">Open</span>: ' + point.point.open +
                                     '<br/><span style ="color:' + point.series.color + ';">High</span>: ' + point.point.high +
                                     '<br/><span style ="color:' + point.series.color + ';">Low</span>: ' + point.point.low + 
                                     '<br/><span style ="color:' + point.series.color + ';">Close</span>: ' + point.point.close + '<br/>';
                            }

                            else {
                                s += '<b><span style = "color:' + point.series.color + ';">' + point.series.name + ' </span>' + ' : ' + Highcharts.numberFormat(point.y, 3) + '</b><br />';
                            }



                        });
                        return s;
                    },
                    shared: true
                },

为了在折线图的工具提示中显示 ohlc 值，需要进行哪些修改？很长一段时间以来，我一直在努力寻找解决方案，但没有成功。

谢谢，

马克斯

编辑

这是我正在设置的系列选项

series: [{
                        type: chartGlobalOptions.chartTypes.name,
                        name: $('#symbol-name').text(),
                        data: data.prices,
                        id: 'Price Axes',
                        dataGrouping: {
                            units: groupingUnits
                        }
                    }, {
                        type: 'column',
                        name: 'Volume',
                        data: data.volume,
                        yAxis: 1,
                        dataGrouping: {
                            units: groupingUnits,
                            approximation: 'close'
                        }
                    }]

这是我从服务器获取的数据。

{"prices":[{"x":1387377184000,"y":1.05,"high":1.06,"low":1.05,"open":1.06,"close":1.05},{"x":1387377509000,"y":1.04,"high":1.06,"low":1.04,"open":1.05,"close":1.04},{"x":1387378295000,"y":1.04,"high":1.04,"low":1.04,"open":1.04,"close":1.04},{"x":1387379370000,"y":1.04,"high":1.04,"low":1.04,"open":1.04,"close":1.04},{"x":1387380217000,"y":1.04,"high":1.04,"low":1.04,"open":1.04,"close":1.04},{"x":1387381181000,"y":1.04,"high":1.04,"low":1.04,"open":1.04,"close":1.04},{"x":1387381324000,"y":1.03,"high":1.03,"low":1.03,"open":1.03,"close":1.03},{"x":1387382146000,"y":1.03,"high":1.03,"low":1.03,"open":1.03,"close":1.03},{"x":1387383229000,"y":1.03,"high":1.03,"low":1.03,"open":1.03,"close":1.03}],
"volume":[[1387377184000,0],[1387377509000,35600],[1387378295000,0],[1387379370000,25300],[1387380217000,0],[1387381181000,0],[1387381324000,4500],[1387382146000,1700],[1387383229000,4000],[1387383788000,2600],[1387384004000,1000],[1387384218000,2900],[1387385045000,0],[1387385840000,10000],[1387386013000,100],[1387386627000,6200],[1387386981000,0],[1387387439000,2500],[1387387728000,2500],[1387387950000,0],[1387388920000,0],[1387389210000,500],[1387389890000,15500],[1387390124000,400],[1387390988000,11900],[1387391264000,4900],[1387391832000,0],[1387392803000,0],[1387393369000,6200],[1387393774000,200],[1387394744000,0],[1387395716000,0],[1387395904000,2800],[1387396334000,15000],[1387396689000,0],[1387397664000,0],[1387398328000,12300],[1387398706000,7000],[1387400379000,13000],[1387463638000,0],[1387464573000,46200],[1387465371000,4000],[1387465588000,0],[1387465948000,33000],[1387466607000,0],[1387466883000,11400],[1387468648000,13500],[1387470272000,12800],[1387470693000,0],[1387471718000,0],[1387472674000,0],[1387472742000,0],[1387473768000,100],[1387474795000,0],[1387475319000,29500],[1387475698000,99100],[1387475822000,14400],[1387476297000,3400]]}

这是我在服务器中设置数据的方式

$this->price[]          = array (
                                              $eachRow[ "timestamp" ] * 1000 ,
                                              $eachRow[ "close" ] * 1 ,
                                              $eachRow[ "high" ] * 1 ,
                                              $eachRow[ "low" ] * 1 ,
                                              $eachRow[ "open" ] * 1 ,
                                              $eachRow[ "close" ] * 1
                            ) ;

return json_encode ( array (
                                     "prices"             => $this->resultArray[ "prices" ] ,
                                     "volume"             => $this->resultArray[ "volume" ] ));

我在刚从服务器获取值后的一开始就执行了 var data = JSON.parse(data);。请让我知道我的程序有什么问题。我的意思是，如果我直接在数据对象中硬编码相同的值，我会得到正确的结果。

Answer 1

您需要将该信息添加到您的积分中，例如:

    series: [{
        //type : 'ohlc',
        name: 'AAPL Stock Price',
        data: [{
            x: 1367884800000,
            y: 100,
            high: 150,
            low: 90,
            close: 120,
            open: 100
        }, {
            x: 1367984800000,
            y: 120,
            high: 170,
            low: 120,
            close: 160,
            open: 120
        }, {
            x: 1368084800000,
            y: 160,
            high: 160,
            low: 90,
            close: 120,
            open: 160
        }]
    }]

jsFiddle 演示:http://jsfiddle.net/UTsT4/

注意:当你有很多点时，将使用数据分组，点信息(opten/high/low/close)将会丢失。因此，这仅适用于禁用的数据分组。