Невозможно скрыть легенду в Chartjs с PrimeFaces7.0 - PullRequest
Новая
       35

Невозможно скрыть легенду в Chartjs с PrimeFaces7.0

2 голосов
/ 31 мая 2019

У меня есть линейная диаграмма, которую я создал с помощью Chartjs в PrimeFaces 7.0, и я хотел бы скрыть легенду. Спасибо за вашу помощь. Мой взгляд и боб ниже.

Я пытался добавить LineChartOptions в bean-компонент, но, похоже, это не работает. Я могу скрыть легенду, если добавлю эту опцию в расширитель. Я использую универсальную функцию расширителя для форматирования меток оси Y, которые используют другие диаграммы. Я не хочу писать другую функцию расширителя только для этой диаграммы, дублируя код для форматирования y-меток и добавляя опцию, чтобы скрыть легенду.

Ниже приведен bean-компонент с LineChartOptions, который, похоже, не работает. 

public LineChartModel createPercentChart() {
        LineChartModel model = new LineChartModel();
        ChartData data = new ChartData();
        LineChartDataSet dataSet = new LineChartDataSet();
        List<Number> values = new ArrayList<>(); // in dollars
        List<String> labels = new ArrayList<>(); // months
        dataSet.setFill(true);
        dataSet.setLabel("return (%)");
        values.add(0.1);
        values.add(0.05);
        values.add(0.5);
        values.add(0.34);
        values.add(0.32);
        values.add(-0.05);
        values.add(-0.01);
        values.add(0.2);
        values.add(0.25);
        values.add(0.33);
        values.add(0.01);
        values.add(0.4);

        labels.add("Jan");
        labels.add("Feb");
        labels.add("Mar");
        labels.add("Apr");
        labels.add("May");
        labels.add("Jun");
        labels.add("Jul");
        labels.add("Aug");
        labels.add("Sep");
        labels.add("Oct");
        labels.add("Nov");
        labels.add("Dec");
        dataSet.setData(values);
        dataSet.setLineTension(0.1);
        dataSet.setPointRadius(0);
        dataSet.setPointHoverRadius(5);
        dataSet.setBorderColor("rgb(150, 200,220)");
        dataSet.setBackgroundColor("rgba(150, 200, 220, 0.2)");

        data.addChartDataSet(dataSet);
        data.setLabels(labels);

        LineChartOptions options = new LineChartOptions();
        Legend legend = new Legend();
        legend.setDisplay(false);
        options.setLegend(legend);
        model.setOptions(options);

        model.setData(data);
        model.setExtender("percentExtender");
        return model;
    }

Вот код расширителя, который я использую в представлении 

function percentExtender() {
       var tickColor = "#666";
       var gridlineColor = "rgba(0,0,0,0.1)";

      this.cfg.config.options = {
          tooltips: {
             callbacks: {

                label: function (tooltipItem, data) {
                   return " " + (tooltipItem.yLabel*100).toFixed(1) + "%";
                }
             }
          },
          scales: {
             yAxes: [{
                display: true,
                scaleLabel: {
                   display: true,
                   labelString: 'Return',
                   fontColor: tickColor
                },
                ticks: {
                   // add $ to y axis label
                   callback: function (value, index, values) {
                       value = value * 100;
                      return value + " %";
                   },
                   fontColor: tickColor
                },
                gridLines: {
                   color: gridlineColor
                }
             }]
          }
       };

    };

1 Ответ

2 голосов
/ 31 мая 2019

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

function percentExtender() {
       var tickColor = "#666";
       var gridlineColor = "rgba(0,0,0,0.1)";

       //copy the config options into a variable
       var options = $.extend(true, {}, this.cfg.config);

      options = {
          tooltips: {
             callbacks: {

                label: function (tooltipItem, data) {
                   return " " + (tooltipItem.yLabel*100).toFixed(1) + "%";
                }
             }
          },
          scales: {
             yAxes: [{
                display: true,
                scaleLabel: {
                   display: true,
                   labelString: 'Return',
                   fontColor: tickColor
                },
                ticks: {
                   // add $ to y axis label
                   callback: function (value, index, values) {
                       value = value * 100;
                      return value + " %";
                   },
                   fontColor: tickColor
                },
                gridLines: {
                   color: gridlineColor
                }
             }]
          }
       };

       //merge all options into the main chart options
       $.extend(true, this.cfg.config, options);
    };
...