Highstock - 如何在线条或面积图工具提示中显示开,高,低,收盘

时间:2013-12-29 14:23:35

标签: javascript json highcharts

我正在尝试在线条或面积图的工具提示中显示开,高,低,收盘。现在,行和面积图的数据正在一个看起来像这样的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值,需要进行哪些修改?我一直试图找到一个解决方案很长一段时间没有任何成功。

谢谢,

Maxx的

修改

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

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);。请让我知道我的程序有什么问题。我的意思是如果我直接在数据对象中硬编码相同的值,我得到正确的结果。

1 个答案:

答案 0 :(得分:2)

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

    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/

注意:当你有很多分数并且将使用dataGrouping时,点信息(opten / high / low / close)将会丢失。所以这只适用于已禁用的dataGrouping。