Stacked Bar Highcharts как показать значения - PullRequest
0 голосов
/ 13 марта 2020

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

  $(function () {

                Highcharts.chart('container5', {

                    chart: {
                        type: 'bar'

                    },
                    title: {
                        text: null
                    },
                    xAxis: {
                        categories: [''],
                        lineWidth: 0, // STEP TWO
                        tickWidth: 0, // STEP ONE
                        labels: {
                            enabled: false
                        },


                    },

                    yAxis: {
                        min: 0,
                        title: {
                            text: '  '
                        },
                        labels: {
                            enabled: false,//default is true
                        },
                        gridLineWidth: 0,
                        minorGridLineWidth: 0,


                    },
                    legend: {
                        reversed: true
                    },


                    plotOptions: {
                        series: {
                            stacking: 'normal'
                        },
                        column: { //at the top bar chart values
                            dataLabels: {
                                enabled: true,
                                crop: false,
                                overflow: 'none'
                            }
                        },

                        bar: {
                            dataLabels: {
                                enabled: true,
                                distance: -50,
                                formatter: function () {
                                    var dlabel = this.series.name + '<br/>';
                                    // dlabel += Math.round(this.percentage*100)/100 + ' %';
                                    return dlabel
                                },
                                style: {
                                    color: 'white',
                                },
                            },

                        }

                    },
                    series: [{
                        showInLegend: false,
                        name: '20',
                        data: [20]
                    }, {
                        showInLegend: false,
                        name: '20',
                        data: [20]
                    }, {
                        showInLegend: false,
                        name: '20',
                        data: [20]
                    }, {
                        showInLegend: false,
                        name: '20',
                        data: [20]
                    }, {
                        showInLegend: false,
                        name: '20',
                        data: [20]
                    }]
                });
            });

Это вывод и ссылка на приложение.

enter image description here

На скриншоте отмечен в красном прямоугольнике angular поле, чтобы показать значения. Смотрите скриншот, прикрепленный ниже

Оригинальный скриншот (образец)

enter image description here

Как и на этом скриншоте, мне нужно показать значения вверху который можно увидеть наверху.

Ответы [ 2 ]

1 голос
/ 13 марта 2020

Вы можете определить несколько меток данных и расположить одну из них в верхней части столбца, например:

series: [{
  ...,
  dataLabels: [{}, {
    format: '20yrs',
    y: -100
  }]
}, ...]

Демонстрационная версия: http://jsfiddle.net/BlackLabel/6m4e8x0y/4909/

Справочник по API: https://api.highcharts.com/highcharts/series.bar.dataLabels

1 голос
/ 13 марта 2020

Добавлено, y: -100 к параметру bar.dataLabel (до форматера).

Вывод изображения: введите описание изображения здесь

Вверху на этикетке отсутствует название:

5-9 лет и 15-20 лет .. альтернативная печать

, а также внутри столбчатой ​​диаграммы с накоплением, значения "20" не отображается.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...