Question

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

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

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

height:'100%'
marginLeft:auto
marginRight:auto
display:'block'

这是我在视图中使用的Extender代码

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

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

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

1 个答案: