Формат всплывающих подсказок в Highcharts

Я использую tooltip.pointFormat для визуализации дополнительных данных в всплывающей подсказке. К сожалению, только point.x отформатирован правильно с тысячным разделителем.Формат всплывающих подсказок в Highcharts

jsFiddle

$(function() { 
    Highcharts.setOptions({ 
    global: { 
     useUTC: false, 
    }, 
    lang: { 
     decimalPoint: ',', 
     thousandsSep: '.' 
    } 
    }); 
    $('#container').highcharts({ 
    xAxis: { 
     type: 'datetime' 
    }, 
    tooltip: { 
     pointFormat: '{series.name}: <b>{point.y}</b><br/>' + 'Count: <b>{point.count}</b><br/>', 
     shared: true 
    }, 
    series: [{ 
     data: [{ 
     y: 20009.9, 
     count: 20009.9 
     }, { 
     y: 10009.9, 
     count: 20009.9 
     }, { 
     y: 40009.9, 
     count: 20009.9 
     }], 
     pointStart: Date.UTC(2010, 0, 1), 
     pointInterval: 3600 * 1000 // one hour 
    }] 
    }); 
});

источник

2014-11-26 Andreas Köberle

Используете ли вы _dot_ как 'thousandsSep' нарочно? – mudasobwa

Да, потому что я в Германии. –

Найдено ответ here.

Числа форматируются с подмножеством соглашений форматирования поплавковых из библиотеки Funciton Sprintf C. Форматирование добавляется внутри переменных скобок, разделенных двоеточием. Например:

Два знака после запятой: "{point.y:.2f}"

Тысячи сепараторе, ни знаков после запятой: {point.y:,.0f}

зделение, один десятичный: {point.y:,.1f}

Таким образом, используя :,.1f внутри скобки будут правильно отформатировать номер.

tooltip: { 
    pointFormat: '{series.name}: <b>{point.y}</b><br/>' + 'Count: <b>{point.count:,.1f}</b><br/>', 
    shared: true 
}

jsFiddle

источник

2014-11-26 12:30:21

Обратите внимание, что это работало только для меня, если бы я задал значения десятичных точек в формате Highcharts и значения тысячSep, как в вашем jsFiddle. – Lebowski156

Instaed из pointFormat, использовать tooltip formatter, а затем Highcharts.numberFormat

tooltip: { 
      formatter:function(){ 

       return this.point.series.name + ': <b>' + Highcharts.numberFormat(this.point.options.count,1,',','.') + '</b><br/>' + 'Count: <b>'+Highcharts.numberFormat(this.point.y,1,',','.')+'</b><br/>'; 
      } 
     },

Пример: http://jsfiddle.net/8rx1ehjk/4/

источник

2014-11-26 09:40:37

Я знаю это раньше и стараюсь избегать этого, потому что я должен поддерживать немецкий и английский формат для целого ряда диаграмм. Поэтому настройка формата один раз для всех графиков гораздо удобнее, чем настройка для каждой отдельной диаграммы. Также отформатированная дата в заголовке отсутствует. –

В нашем случае tooltipFormatter применяется формат только для y собственности, я нашел несколько способов, как добавить формата не только для y,

формата надстройка для каждой подсказки и каждое имущество, подобное этому point.count:,.f
```
pointFormat: '{series.name}: {point.count:,.f} ' + 'Count: {point.y} ', 
```

создать небольшое расширение, как этот

(function (Highcharts) { 
    var tooltipFormatter = Highcharts.Point.prototype.tooltipFormatter; 

    Highcharts.Point.prototype.tooltipFormatter = function (pointFormat) { 
    var keys = this.options && Object.keys(this.options), 
     pointArrayMap = this.series.pointArrayMap, 
     tooltip; 

    if (keys.length) { 
     this.series.pointArrayMap = keys; 
    }  

    tooltip = tooltipFormatter.call(this, pointFormat);   
    this.series.pointArrayMap = pointArrayMap || ['y']; 

    return tooltip; 
    } 
}(Highcharts));

Example

источник

2014-11-26 12:34:17

Формат всплывающих подсказок в Highcharts

ответ

Смежные вопросы