Настройте всплывающую подсказку и отформатируйте число до двух знаков после запятой.

Я использую график Highcharts для отображения круговой диаграммы. Я хочу изменить всплывающую подсказку, чтобы отобразить фактическое поле data вместе с именем серии вместо процентного значения.

Вот пример в jsFiddle

Если вы проверите вышеприведенный образец, вы найдете 2 вещи

  • Подсказка: pointFormat: '{series.name}: {point.percentage}%' i.e.

    Доля браузера: некоторое процентное значение

Я хочу показать:

Browser share: 40 (data value instead of percentage)

2. Далее будет отображаемый текст для каждого раздела в пироге. Можно видеть n число десятичных знаков, что делает график очень уродливым.

Я хочу показывать числа только до двух десятичных знаков, например percentageDecimals: 1, используемых в подсказке.

Я пробовал несколько вещей для 1-го типа series.data, который возвращает массив объектов. Также series.data [0]. Но пока никаких успехов

Как я могу сделать обе эти вещи?

Ответы

Ответ 1

Вы можете изменить его, чтобы вместо этого отобразить значение данных, изменив вашу подсказку pointFormat от pointFormat: '{series.name}: <b>{point.percentage}%</b>', до pointFormat: '{series.name}: <b>{point.y}%</b>',

Вы можете округлять числа, используя функцию Highcharts.numberFormat(), как показано в вашем форматировании:

formatter: function() {
    return '<b>'+ this.point.name +'</b>: '+ Highcharts.numberFormat(this.percentage, 2) +' %';
}

Ответ 2

Вы можете использовать Форматировать строки, чтобы помочь вам форматировать числа и даты.

x Десятичные места

Просмотр JSFiddle

// point.percentage = 29.9345816
pointFormat: '{point.percentage:.0f}%' // returns: `30%` - (rounds to nearest)
pointFormat: '{point.percentage:.1f}%' // returns: `29.9%`
pointFormat: '{point.percentage:.2f}%' // returns: `29.93%`
pointFormat: '{point.percentage:.3f}%' // returns: `29.935%`

Тысяча сепараторов

Просмотр JSFiddle

// point.percentage = 1029.9
{point.percentage:,.0f} // returns: `1,030`
{point.percentage:,.1f} // returns: `1,029.9`

Подробнее в документации:

Документация: http://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting

Ответ 3

Вот подробное описание о форматировании tooltip http://api.highcharts.com/highcharts#tooltip.formatter

this.point (not shared) / this.points[i].point (shared)

И попробуйте this.points[i].point, если this.point не работает

Ответ 4

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