jsf - 无法使用 PrimeFaces7.0 在 Chartjs 中隐藏图例
问题描述
我有一个在 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
}
}]
}
};
};
解决方案
您正在用您的更改覆盖原始 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);
};
推荐阅读
- javascript - 现在正在模态中访问 Js 脚本
- python - py文件转exe文件时调用sklearn失败
- assembly - 为什么编译器要重新计算另一个寄存器中已经存在的值?
- discord.py-rewrite - 'VoiceState' 对象没有属性 'voice_channel'
- android - 为什么广播接收器在重新启动时不起作用?
- python - 在 Lambda DynamoDB 函数中添加限制
- ios - IOS 14 AVPlayer 在模拟器上播放,但不在真实设备上
- elasticsearch - 弹性搜索 kubernetes 数据磁盘使用量猛增
- c# - 上传 excel 文件并在 aspnet core 中添加手动值
- mysql - MySQL CLI:未知选项:enable-cleartext-plugin