Настройка точка Контекстного Highcharts

Question

В этой скрипке:

http://jsfiddle.net/LLExL/5122/

Этикетка серии не отображается правильно. Если наведите курсор на точку данных, точка данных x будет отображаться как время в миллисекундах.

ЦСИ:

<script src="http://code.highcharts.com/highcharts.js"></script> 
<script src="http://code.highcharts.com/modules/exporting.js"></script> 
<div id="chart-grid"></div> 

.chart { 
    width: 350px; 
    height: 300px; 
} 

var json = [ 
    { 
     "header": "test1", 
     "children": [ 
      { 
       "date": "2015-01-02", 
       "count": "36" 
      }, 
      { 
       "date": "2015-01-03", 
       "count": "29" 
      } 
     ] 
    }, 
    { 
     "header": "test2", 
     "children": [ 
      { 
       "date": "2015-01-02", 
       "count": "36" 
      }, 
      { 
       "date": "2015-01-03", 
       "count": "129" 
      } 
     ] 
    } 
]; 

$(document).ready(function() { 

    var options = { 
     chart: { 
      type: 'scatter' 
     }, 
     title: { 
      text: 'test' // Title for the chart 
     }, 
     subtitle: {}, 
     legend: { 
      enabled: true 
     }, 
     tooltip: {}, 
     plotOptions: { 
      series: { 
       //pointStart: pointStart, 
       pointInterval: 24 * 3600 * 1000 * 30 
      } 
     }, 
     xAxis: { 

      type: 'datetime' 
     }, 
     yAxis: { 
      minPadding: 0, 
      maxPadding: 0, 
      gridLineColor: 'rgba(204,204,204,.25)', 
      gridLineWidth: 0.5, 
      title: { 
       text: 'Access Count', 
       rotation: 0, 
       textAlign: 'right', 
       style: { 
        color: 'rgba(0,0,0,.9)', 
       } 
      }, 
      labels: { 
       style: { 
        color: 'rgba(0,0,0,.9)', 
        fontSize: '9px' 
       } 
      }, 
      lineWidth: .5, 
      lineColor: 'rgba(0,0,0,.5)', 
      tickWidth: .5, 
      tickLength: 3, 
      tickColor: 'rgba(0,0,0,.75)' 
     }, 
     series:[] 
    }; 

    var $chartGrid = $('#chart-grid'), 
     title = [], 
     serie, 
     date, 
     name; 

    $.each(json, function(i, item) { 
     name = 'container-' + i; 
     $chartGrid.append('<div id="'+name+'" class="chart"></div>'); 

     serie = [{ 
      data: [] 
     }]; 

     $.each(item.children, function(j, points) { 
      date = points.date.split('-'); //Date.parse doens't work in FF and IE 

      serie[0].data.push({ 
       x: Date.UTC(date[0],date[1],date[2]), 
       y: parseFloat(points.count) 
      }); 
     }); 


     options.title.text = item.header; 
     options.series = serie; 
     $('#' + name).highcharts($.extend({}, options)); 
    }); 


}); 

Если я использую линейный график http://jsfiddle.net/LLExL/5123/ который отображается дата.

Как отобразить значения оси x при наведении в формате dd/mm/yyyy hh:mm:ss?

Можно ли переименовать ярлыки x и y?

Answer 1

Вы можете использовать параметры форматирования всплывающей подсказки и Highcharts.dateFormat для форматирования в соответствии с вашими потребностями.

tooltip: { 
    formatter: function() { 
     return 'x: ' + Highcharts.dateFormat('%d/%m/%Y %H:%M:%S', this.x) + '<br>' + 'y: ' + this.y; 
    } 
}, 

http://jsfiddle.net/nicholasduffy/sm42x9u8/2/

http://api.highcharts.com/highcharts#tooltip.formatter http://api.highcharts.com/highcharts#Highcharts.dateFormat