Jsf 无法使用PrimeFaces7.0在Chartjs中隐藏图例

Jsf 无法使用PrimeFaces7.0在Chartjs中隐藏图例,jsf,primefaces,chart.js,jsf-2.2,Jsf,Primefaces,Chart.js,Jsf 2.2,我用PrimeFaces 7.0中的Chartjs创建了一个折线图,我想隐藏图例。 谢谢你的帮助。我的观点和bean如下 我试图在bean中添加linechart选项,但这似乎不起作用。如果在扩展器中添加该选项,则可以隐藏图例。我正在使用通用扩展函数格式化其他图表正在使用的y轴标签。我不想为这个图表编写另一个扩展函数,复制代码来格式化y标签,并添加隐藏图例的选项 下面是带有LineChartOptions的bean,它似乎不起作用 public LineChartModel createPerc

我用PrimeFaces 7.0中的Chartjs创建了一个折线图,我想隐藏图例。 谢谢你的帮助。我的观点和bean如下

我试图在bean中添加linechart选项,但这似乎不起作用。如果在扩展器中添加该选项,则可以隐藏图例。我正在使用通用扩展函数格式化其他图表正在使用的y轴标签。我不想为这个图表编写另一个扩展函数,复制代码来格式化y标签,并添加隐藏图例的选项

下面是带有LineChartOptions的bean,它似乎不起作用

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;
    }

您正在用更改覆盖原始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);
    };

我看到你正在使用扩展器,你能发布你的扩展器JS代码吗?您可能无意中覆盖了扩展程序代码中图例的值。@Melloware,我添加了扩展程序代码。谢谢你的帮助!解决方案张贴在下面。您需要复制和合并选项。谢谢!这很有效。我在你先前对另一个问题的回答中看到了这两行,但我不理解其目的。我现在明白了。是否在某个地方记录了这些内容。@RXP在我所知道的使用扩展器的任何地方都没有记录这些内容。
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);
    };