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