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

Question

我有一个在 PrimeFaces 7.0 中使用 Chartjs 创建的折线图，我想隐藏图例。 谢谢你的帮助。我的视图和豆子在下面。

我尝试在 bean 中添加 LineChartOptions，但这似乎不起作用。如果我在扩展器中添加选项，我可以隐藏图例。我正在使用通用扩展器函数来格式化其他图表正在使用的 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;
    }

这是我在视图中使用的扩展器代码

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

    };

Answer 1

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