Блог

Главная - Вопросы по программированию - PrimeFaces: удаление метки столбчатой диаграммы в формате ChartJS

PrimeFaces: удаление метки столбчатой диаграммы в формате ChartJS

#javascript #java #primefaces #chart.js

#javascript #java #primefaces #chart.js

Вопрос:

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

 //xhtml element:
<p:panel  header="Oportunidades">
    <p:barChart id="graficoOportunidadesRepresentante" model="#{dashboardBean.barModel}" style="width:100%; height:420px"/>         
</p:panel>  

//Bean generation method:
public void criaGraficoOportunidadesPorRepresentante() {
    barModel = new BarChartModel();
    ChartData data = new ChartData();
    [...]
    data.setLabels(labels); //comes from the related sales rep's name
    barModel.setData(data); //backend fetches amounts from database

    // Options
    BarChartOptions options = new BarChartOptions();
    CartesianScales cScales = new CartesianScales();
    CartesianLinearAxes linearAxes = new CartesianLinearAxes();
    linearAxes.setStacked(true);
    cScales.addXAxesData(linearAxes);
    cScales.addYAxesData(linearAxes);
    options.setScales(cScales);

    Title title = new Title();
    title.setDisplay(true);
    title.setText(labelGraficoOportunidadesAtivas);
    options.setTitle(title);

    Tooltip tooltip = new Tooltip();
    tooltip.setMode("index");
    tooltip.setIntersect(false);
    options.setTooltip(tooltip);
    
    barModel.setExtender("chartOportunidadePorRepresentanteExtender");
    barModel.setOptions(options);
}
    
//Javascript extender: 
    function chartOportunidadePorRepresentanteExtender() {                             
               var options = $.extend(true, {}, this.cfg.config);
                options = {
                 options: {             
                    plugins: {
                      labels: {
                        render: 'value',
                        position: 'inside'
                      }
                    },
                    title: {
                        fontSize: 16
                    }
                  }
                  };           
               $.extend(true, this.cfg.config, options);
            };

Я хочу, чтобы цифры на столбцах не отображались, потому что они лучше читаемы во всплывающей подсказке элемента и накладываются друг на друга
, как показано на этом скриншоте .AFAIK, метка ссылается на имя представителя, и каждый набор данных также имеет метод «.setLabel (String)», который отображает заголовок диаграммы и содержимое. Я нашел несколько решений, ссылающихся на свойство «легенда», но оно отключило так называемое свойство label.

Комментарии:

1. Может быть, я не понимаю, но в этом примере на столбцах нет цифр? primefaces.org/showcase/ui/chartjs/bar/bar.xhtml они есть только во всплывающих подсказках.

2. Точно, и мой код практически такой же, как в примере (за исключением расширителя, удаление которого только что изменилось с круглых чисел на процентиль)

3. вы пробовали удалять расширитель, чтобы посмотреть, как он выглядит? Возможно, ваш расширитель удаляет другие настройки, потому что я вижу, что вы устанавливаете labels .

4. Да, и таким образом вместо чисел я получил процентильные значения поверх столбцов

5. Странно, что у PF Showcase не было бы такого же поведения, но это не так? Что-то в вашем должно быть другим.

Ответ №1:

Я справился с этим. В расширителе js:

 labels: {
         render: 'value',
         fontSize: 0
         }

Я даже не знаю, почему я удалил значение «позиция: внутри», я только что это сделал. FontSize = 0 скрывал числа.