Question

我正在使用Highstockchart在图表上绘制4个系列，主要是烛台，然后我有两个系列来绘制priceplus，价格是另一个来代表交易量。我有一个问题，因为pricelower / priceplus的工具提示将时间显示为unix日期时间而不是人类可兑换形式（如您在此屏幕截图中所示）

我希望这不被修改

我该怎么做？感谢

这是我的JS代码

function onSuccess(data) {
    var r = JSON.stringify(data);
    debugger;
    kendo.ui.progress($('#container'), false);
    $('#container')
        .highcharts('StockChart',
        {
            exporting: {
                enabled: false
            },
            credits:
            {
                enabled: false
            },
            rangeSelector: {
                selected: 1,
                inputEnabled:false,
                buttonTheme: {
                    visibility: 'hidden'
                },
                labelStyle: {
                    visibility: 'hidden'
                }
            },
            yAxis: [
                 {
                     height: '80%',
                     lineWidth: 2
                 }, {
                     top: '85%',
                     height: '15%',
                     offset: 0,
                     lineWidth: 2
                 }
            ],
            xAxis:
           {
               ordinal: true
           }
        ,
            series: [
                {
                    type: 'candlestick',
                    name: 'Price',
                    data: data.Prices,
                    id: 'dataseries',
                    upColor: "#31D431",
                    color: "#D22F2F",
                    marker:{
                        enabled: true
                    }
                },
                {
                    type: 'scatter',
                    name: 'Prices plus',
                    data: data.PricesPlus

                },

            {
                type: 'scatter',
                name: 'Price less',
                data: data.PricesLess

            }
               , {
                   type: 'column',
                   name: 'Volume',
                   data: data.Volume,
                   yAxis: 1,
                   dataGrouping: {
                       units: groupingUnits
                   }
               }
            ],
            width: 4,
            tooltip: {
        shared: false

}

        });
}

Answer 1

您应该使用tooltip.formatter然后创建弹出内容。每个值都可以从点参考中提取。

tooltip:{
    formatter: function() {
        var points = this.point ? Highcharts.splat(this.point) : this.points,
            point = points[0],
            each = Highcharts.each,
          txt = '';

      txt += '<span style="font-size: 10px">' + Highcharts.dateFormat('%A, %b, %H:%M', point.x) + '</span><br/>';

        each(points, function(p, i) {

        if(p.point && p.point.open) {
            txt += '<span style="color:' + p.color + '">\u25CF</span><b> ' + p.series.name + '</b>:<br/>Open: ' + p.point.open + '<br/>High: ' + p.point.high + '<br/>Low: ' + p.point.low + '<br/>Close: ' + p.point.close + '<br/>'; 
        } else {
            txt += '<span style="color:' + p.color + '">\u25CF</span> ' + p.series.name + ': <b>' + p.y + '</b><br/>'; 
        }
      });

        return txt;
    }
  },

实施例： - http://jsfiddle.net/abpbyx8z/

自定义工具提示，将蜡烛棒保留原样

1 个答案: