Как установить метку ChartJS Axis с помощью PrimeFaces - PullRequest
Новая
       9

Как установить метку ChartJS Axis с помощью PrimeFaces

1 голос
/ 16 октября 2019

Я использую PrimeFaces 7, поставляемый с ChartJS.

Есть опции для добавления заголовка / метки к самой диаграмме, а также к наборам данных. Однако я не смог найти способ добавить заголовки / метки к осям. Также нет примеров того, как это сделать на витрине: https://www.primefaces.org/showcase/ui/chartjs/

Я попытался использовать функцию экстендера, так же, как мы это делали со старым JQPlot в более старых версиях PF. Итак, для функции JS я пытаюсь настроить метку, как показано здесь: https://www.chartjs.org/docs/latest/axes/labelling.html

Так это выглядит так:

xhtml: 

<script>

        function extender() {

                if (!this.cfg.config.options) {
                    this.cfg.config.options = {}
                }

               var options = $.extend(true, {}, this.cfg.config.options);

               options = {
                      scales: {
                        yAxes: [{
                          scaleLabel: {
                            display: true,
                            labelString: 'test'
                          }
                        }],
                        xAxes: [{
                          scaleLabel: {
                            display: true,
                            labelString: 'test'
                          }
                        }],
                      }
                    };

               $.extend(true, this.cfg.config, options);
            };

</script>

Java Bean: 

barModel = new BarChartModel();
barModel.setExtender("extender");

И: никаких ярлыков не отображается.

Я что-то здесь упускаю?

1 Ответ

1 голос
/ 16 октября 2019

Моя функция JS была неправильной. Приведенный ниже код теперь работает должным образом: отображается метка оси y. 

function extender1() {

               var options = {

               options: {
                      scales: {
                        yAxes: [{
                          scaleLabel: {
                            display: true,
                            labelString: 'Order amount'
                          }
                        }],
                      }
                    }                  
            };
               $.extend(true, this.cfg.config, options);
        };
...