HighCharts: отображение итогового значения под заголовком легенды

Я могу отображать легенду и заголовок легенды в angular2-highcharts. Я планирую отобразить общее количество под заголовком легенды (здесь, под названием города), но не могу понять, как это сделать. Также я не уверен, почему% отображается вместе со значением в значениях легенды.

Мой форматировщик этикеток:

  labelFormatter: function () {
      return '<div class="legend-label-md row" style=" border-bottom:1px solid black; margin-bottom: 5px"><span class="col-md-10">' + this.name +
             '</span><span class="col-md-2" >' + this.value +
              '%</span></div> ';
       }

https://plnkr.co/edit/yzXLz7AIDoWa1Pzxxl4k?p=preview


highcharts angular2-highcharts
person indra257    schedule 30.03.2017    source источник
comment
% отображается из-за символа% здесь: '%</span></div> ';   -  person teni    schedule 30.03.2017
comment
Спасибо. Я не заметил этого. Любая идея о том, как получить общую стоимость и отобразить ее.   -  person indra257    schedule 30.03.2017
comment
Я давно не работал с HS, и я не знаком с таким способом его инициирования. Если вы каким-то образом назначите его переменной, вы получите доступ ко всем ее объектам. Как это: jsfiddle.net/trn_/ck8xq14w   -  person teni    schedule 30.03.2017

Ответы (1)


arrow_upward
0
arrow_downward

Каждая точка кругового ряда имеет итоговое значение для ряда, поэтому вы можете обновить легенду при событии загрузки диаграммы, чтобы включить итоговое значение для ряда.

Демо: https://plnkr.co/edit/6JW1KmYE1Lr4pAIWCJTm?p=

шаблон как:

template: `
    <chart  [options]="options" (load)="onLoad($event)">
    </chart>
`

In class AppComponent:

    onLoad (e) {
                var chart = e.context,
                    total = chart.series[0].points[0].total;
                chart.update({
                    legend: {
                        title: {
                            text: 'City<br/><span style="font-size: 9px; color: #666; font-weight: normal">(Total: ' + total + ')</span>' 
                        }
                    }
                })
              };
person Kacper Madej    schedule 31.03.2017
comment
Ценить это. Также я пытаюсь отключить эффект тени при наведении курсора на срез. Я пробовал series: {shadow: false}, также plotShadow: false, но оба не сработали. - person indra257; 31.03.2017
comment
@ indra257 Это ореол, а не тень - вот демонстрация с отключенным им: plnkr.co/edit/ 37POwXIuP8oBnLtcFL1l? P = preview (размер до 0 в этот вариант) - person Kacper Madej; 31.03.2017
comment
@ indra257 Вы можете использовать tooltip.positioner, чтобы установить положение всплывающей подсказки - plnkr.co/edit/mfV5dot3 ? p = preview Осталось установить стиль для всплывающей подсказки - для этого можно использовать API: api.highcharts.com/highcharts/tooltip - person Kacper Madej; 03.04.2017
comment
У меня небольшая проблема со значками ярлыков. Не могли бы вы проверить, stackoverflow.com / questions / 43452938 / - person indra257; 17.04.2017
comment
Не могли бы вы проверить это stackoverflow.com/questions/43474750/ - person indra257; 18.04.2017