无法在使用PrimeFaces7.0的Chartjs中隐藏图例
PrimeFaces是一个开源的JavaServer Faces（JSF）组件库，提供了丰富的UI组件和功能，方便开发人员快速构建Web应用程序。Chart.js是一个流行的JavaScript图表库，可以用于创建各种类型的图表，如折线图、柱状图、饼图等。
在PrimeFaces 7.0中使用Chart.js时，隐藏图例可以通过以下步骤实现：
- 在JSF页面中引入Chart.js库。可以通过在页面的
<head>标签中添加以下代码来引入Chart.js库：
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>- 在JSF页面中使用PrimeFaces的
chart组件，并设置legend属性为false。例如，创建一个折线图并隐藏图例的代码如下：
<p:chart type="line" model="#{bean.lineModel}" legend="false" />- 在后端Java代码中，创建一个
LineChartModel对象，并设置相应的数据和配置。例如，创建一个包含数据和配置的折线图模型的代码如下：
import org.primefaces.model.chart.LineChartModel;
import org.primefaces.model.chart.LineChartSeries;
public class Bean {
private LineChartModel lineModel;
public Bean() {
lineModel = new LineChartModel();
LineChartSeries series = new LineChartSeries();
series.setLabel("Series 1");
series.set(1, 10);
series.set(2, 20);
series.set(3, 30);
lineModel.addSeries(series);
}
public LineChartModel getLineModel() {
return lineModel;
}
}以上代码创建了一个包含一个系列数据的折线图模型，并将图例设置为隐藏。
总结：
PrimeFaces 7.0中的Chart.js图表组件可以通过设置legend属性为false来隐藏图例。通过在JSF页面中引入Chart.js库，并在后端Java代码中创建相应的图表模型，可以实现隐藏图例的效果。
腾讯云相关产品推荐：
相关·内容
1回答
当文本太长时，我的ChartJs图例文本会在同一行中溢出。是否有任何参数可用于启用文本包装。
legend : {
display : true,
position : 'bottom',
fullWidth: false,
labels : {
fontColor : "#000",
// boxWidth : "3"
}
}
在其他图表库中，如高图集，您只需设置宽度，如果文本超过宽度，文本将被包装。在ChartJS中有这样的选项吗？
高级图表库示例：
legend:
浏览 3提问于2016-11-24得票数 8
是否可以在chartjs中仅隐藏某些数据集图例？我知道可以用来隐藏一切
options: {
legend: {
display: false
浏览 5提问于2017-11-03得票数 34
6回答
我正在开发一个使用chart.js (www.chartjs.org)的网站。
我必须制作一个折线图来显示多个数据序列，用户可以通过单击相应的图例符号(类似于此)来隐藏或显示这些数据。
有没有办法用chartjs做到这一点？
浏览 2提问于2015-01-22得票数 8
我在我的项目中使用ChartJS (更确切地说，NG2是在原始库的基础上构建的角度2的NG2图表)。
我认为有一种选择：
图例:假真
但是，我发现特别恼人的是能够删除，上的图例(例如，描述行图中的每一行)。下面你可以看到我的意思：
我试过
.chart-legend {
visibility: hidden;
display: none;
}
从中汲取启示
但我认为这也适用于其他传说(底部传说)。有办法定制/隐藏上层图例吗？
另外，是否有更改x/y轴标签方向的选项？(例如垂直显示，而不是对角线)
浏览 1提问于2016-08-02得票数 4
回答已采纳
1回答
我使用的是chartjs，在单击图例项时，我不想执行任何操作。我设法使用下面的代码实现了这一点： legend: {
position: 'right',
onClick: (e) => {
if (!this.isFilterView)
e.stopPropagation();
}, 但是，当它是筛选器视图时，我仍然希望图例项在单击时正常工作。上面的代码不能实现这一点。我怎么才能让它工作呢？
浏览 34提问于2020-07-10得票数 0
1回答
const myLineChart = new Chart(viewsCount, {
type: 'line',
data: lineChartStats.data,
options: {
elements: {
line: {
tension: 0 // disables bezier curves
},
point: {
pointStyle: 'line'
浏览 2提问于2021-04-09得票数 0
在旧的ChartJS v2中，当我将图例设置为一个甜甜圈图时，整个画布的高度会自动调整到所需的最小空间，而不会在顶部和底部有任何额外的填充：
在ChartJS v3中，画布的高度总是相同的，无论是顶部还是右边的默认图例：
这会在画布上和图下方造成大量不必要的空白。有什么办法可以避免这种情况吗？我在文档中找不到要设置的相关参数。
谢谢。
浏览 3提问于2022-06-07得票数 0
回答已采纳
1回答
我用react Chartjs-2饼图作为我的仪表板。根据要求，我必须在图例中显示两个带有数据的标签。下面是我在应用程序中使用的组件
import React, { Component } from "react";
import { Doughnut } from "react-chartjs-2";
class DoughnutChart extends Component {
constructor(props) {
super(props);
}
render() {
const chartdata = {
l
浏览 5提问于2020-11-24得票数 2
回答已采纳
我知道如何在Chartjs中为数据集绘制甜甜圈图表及其图例定制，但我希望有一个如下图所示的图表，其中每个部分的线条都在线条的上下突出。我在Chartjs中找不到这样的自定义级别。有人知道怎么做吗？任何帮助都将不胜感激。谢谢
浏览 15提问于2021-05-23得票数 0
回答已采纳
在ChartJS中，如果我们单击图例，那么我们单击的部分将消失。这种情况能逆转吗？例如，如果我们单击图例，那么除了该部分之外，图表中的所有其他部分都应该会消失。这个是可能的吗？有没有人能对此提出任何解决方案?我必须在angular 2+上完成此操作。提前谢谢。
浏览 0提问于2018-04-04得票数 1
我有一个通过'npm react- ChartJS -2‘使用chartjs的react应用程序。我正在使用Line图表，我有以下要求：
1-检测点击图表区域(白色区域；数据集线和图例除外)，然后执行一些逻辑
2-检测点击顶部的图例矩形以隐藏/显示数据集(当前默认行为)
我试过使用options.onClick，但它似乎覆盖了图例点击。我也尝试过getElementAtEvent，它会返回被点击的数据集，但是当点击图例/图表区域时，它显示为空。getDatasetAtEvent总是返回空数组。如果我使用options.legend.onClick，我会放松默认的隐藏/显示行为，并且需要
浏览 2提问于2018-11-25得票数 0
我使用以下选项获得ChartJS 2的点样式图例：
options: {
legend: {
labels: {
usePointStyle: true
}
}
}
但是，正如在下一个图像中显示的那样，每个点包括一个边框和一个阴影：
使用ChartJS 2.7.2。
是否有控制边框和阴影的选项？我怎么才能把它们移走？
浏览 0提问于2018-05-07得票数 3
回答已采纳
3回答
我需要使用ChartJS库为我的圆环图创建自定义图例。我已经创建了由ChartJS提供的默认图例甜甜圈，但我需要一些修改。
我希望有高于汽车名称的价值。我也不喜欢粘性图例，我想把它与甜甜圈分开，这样我就可以改变字体，方框的样式(例如，在文本"Audi“旁边)
我知道有一些，但我不确定如何在VueJS中使用它-因为我使用VueJS作为框架
这是我的图例现在的样子--
我的代码：
从我导入甜甜圈组件的Vue组件：
<div class="col-md-6">
<div class="chart-box">
<p c
浏览 3提问于2017-06-20得票数 4
1回答
是否可以垂直旋转条形图左侧的图例(在chartjs中)？我似乎在文档中找不到它。 当前： ? 招聘： ? 代码： chartData是一个包含字符数据的数组，其中chartData"yas“等于"Samples”图例标题 let myChart = new Chart(chart, {
type: 'bar',
data: {
labels: chartData['labels'],
datasets: [{
label: chartData["ya
浏览 14提问于2021-08-06得票数 0
1回答
我在React中通过react-chartjs-2显示了一个Chart.js甜甜圈图表，默认情况下，每个甜甜圈部分都会显示以下线框内容。下面是一个例子： ? 这些行框的东西叫什么，我如何关闭它们？ 此外，它们似乎不会默认出现在基础Chart.js库中，但它们会出现在react-chartjs-2 npm包中的甜甜圈(可能还有饼图)中。我搜索了又搜索，并尝试切换图例、图例标签和工具提示的一堆选项，但都无济于事。我想不出怎么把它们关掉。谢谢你的帮助。
浏览 21提问于2021-03-30得票数 0
1回答
我是Vue-ChartJs的新手，对此非常好奇： ? 如何将图例位置更改为图形底部？
浏览 38提问于2021-09-21得票数 1
回答已采纳
我将Chart.js HTML page从2.7版迁移到3.4版，只剩下一个问题。 图例的字体大小不能更改。 我尝试了下面的代码 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.0/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/1.0.2/chartjs-plugin-annotation.min.js
浏览 23提问于2021-07-02得票数 0
回答已采纳
我使用Chartjs和一行数据集混合制作了一个堆叠成的组条形图：
我想通过将第一项Productivité呈现为一行(而不是显示的矩形)来区分它的图例。
我通过了，但无法找到如何实现我正在寻找的东西。
浏览 1提问于2018-02-12得票数 4
回答已采纳
1回答
在chartjs中，当我点击任何一个图例时，它会突出显示文本，并隐藏特定数据的细节。我需要将文本设置为灰色或其他一些好的选项，而不是敲击文本。
浏览 0提问于2018-03-15得票数 0
我想要一个通用的图例用于多个图表，我偶然发现了这篇文章Chart.js Multiple charts with one common legend，它可能适用于ChartJS版本低于3的版本，但我没有尝试，因为我正在使用ChartJS版本3。 给定的解决方案不适用于版本3以上的ChartJS，因为在版本3- Chart.prototype.generateLegend中有几个函数被弃用 有没有人可以帮我用ChartJS版本3(最新版本)来实现这一点呢？这是我正在寻找的一个非常重要的特性。
浏览 17提问于2021-08-05得票数 1
回答已采纳
1回答
ChartJs饼图有4个默认位置表单图例:顶部、底部、左侧和右侧。但是需要这样的东西： ? 如果您需要，我有一个默认图例样式的小样本：https://codepen.io/eduardodos/pen/xxbwGpN options: {
legend: {
position: 'bottom'
}
} 有人知道怎么做吗？
浏览 52提问于2019-12-06得票数 1
回答已采纳
1回答
基于，我能够添加事件，但没有触发。知道为什么吗？我使用默认的chart.js图例。
Chart.helpers.each(vm.chart.legend.legendItems, function(legendNode, index) {
Chart.helpers.addEvent(legendNode, 'mouseover', function() {
console.log('event triggered!');
});
});
简要代码描述：将事件添加到每个图例项。
使用：angularjs和chartjs 2.1.6
浏览 0提问于2016-07-02得票数 3
通过单击图例来显示/隐藏数据集的chartjs功能真的很棒。例如，在图表画布外单击复选框可以实现相同的效果吗？
浏览 1提问于2017-10-18得票数 0
render chart view how the chart looks 因此，我觉得我已经尝试了所有的方法来删除图表上方的红色矩形。有人知道怎么去掉它吗？如果我没记错的话，下面的大多数带有设置选项和图例的示例可能适用于chartjs，但不适用于vue-chartjs。 options: {
legend: {
display: false,
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
浏览 34提问于2021-04-08得票数 0
1回答
我用图表来画雷达图。在常规图表中，工具提示显示chartjs图例，下面显示此图例id的值列表。
比如：
食
65
28
我想添加数据集图例。(i )这个应该是可能的，因为数据之前有数据集的颜色。
所以我想要的是：
食
65 :我的第一个数据集
28 :我的第二个数据集
我有的数据
我认为这与tooltipTemplate选项有关：
tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>"
提前谢谢你
浏览 2提问于2015-12-30得票数 0
2回答
我想出了这个JSFiddle：https://www.jsfiddle.net/gcb1dyou有圆形的chartJs条corners.Problem是当图例点击过滤数据时，边角消失，如下所示 ? 当我点击橙色标签时，你可以看到圆角边框在黄色条上消失了。 var lastVisible = 0;
for (var findLast = 0, findLastTo = this._chart.data.datasets.length; findLast < findLastTo; findLast++) {
if (!this._chart.getDatasetMeta(findLa
浏览 7提问于2020-06-17得票数 0
我在我的一个项目中使用react-chartjs-2，我找不到图表的问题，因为在手机上所有的标签和图例仍然是大的af。我试过responsive: true，maintainAspectRation: true。毫无办法
浏览 0提问于2018-12-03得票数 3
我试图在实际图表和图例/标签之间添加一个空格。
图例具有严格的位置，我不知道如何在图表和标签之间添加一个填充/边距。
发现了一些讨论，但与反应钩无关。
据我所知，我需要使用内置于函数中的beforeinit。
下面是代码片段和。
import React from "react";
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js";
import { Doughnut } from "react-chartjs-2";
ChartJS.registe
浏览 10提问于2022-05-28得票数 0
回答已采纳
2回答
图表js如果有更多的内容，我如何包装图例标签文本？
代码沙箱：
chart.js：3.6.0
react-chartjs-2：4.3.1
浏览 6提问于2022-08-01得票数 0
我在我的网站中使用了ChartJS v2.9.3，我在一个长池中调用了一个函数，它从API中获取数据，在那里生成图例，就像从API生成新数据一样，它可以更改。
我的旧代码是：
$('#legend-rc').html(chartRC.generateLegend());
现在我将我的ChartJS迁移到了最后的3.7.0版本，但是我得到了chartRC.generateLegend is not a function
通过查看文档，generateLegend()似乎已经被删除了，但是我如何才能像迁移后使用v2那样做一些事情呢？
浏览 4提问于2022-01-19得票数 0
回答已采纳
1回答
我正在尝试自定义chartjs图例，以便当您将鼠标悬停在图例项上时，图标/点样式将会更改。请参见屏幕截图Screenshot。这个是可能的吗？ 我正在尝试使用onHover属性做不同的事情，但没有成功。 legend: {
display: true,
onHover: function (event, legendItem, legend) {
//Change Point style to icon
},
onLeave: function (e) {
浏览 16提问于2021-06-25得票数 0
回答已采纳
1回答
如何使数据集的编程切换与ChartJS的图例单击一起播放？
以下是我问题的再现：
运行在snippet.Toggle水果数据关闭按钮下: just！Toggle水果数据返回with按钮: just！Toggle水果通过单击图例项目: works.Toggle水果返回到图例项目: works.Toggle水果，再次按下按钮：⚠坏了！<code>G 213</code>
我希望自定义逻辑能够很好地利用ChartJS的内置功能。
const chart = new Chart(document.getElementById("chart").getCont
浏览 9提问于2021-12-21得票数 0
我正在使用ChartJS处理甜甜圈图，我很难在图和图例之间创建某种空间。
这是我的传奇配置：
plugins: {
legend: {
display: true,
align: 'start',
position: 'bottom',
}
}
这就是我写的插件，用来给传说增加更多的高度：
const LegendMargin = {
id: 'LegendMargin',
beforeInit(chart, legend, options) {
const fitValue = chart.leg
浏览 6提问于2022-08-03得票数 1
回答已采纳
我正在尝试从chartjs甜甜圈图表中删除所有默认标签，但底部的标签似乎并未消失 最初在顶部有一个图例，但我设法隐藏了它，但现在我面对底部的标签，它们完全毁掉了图表 下面是我的配置中的options属性 options: {
cutoutPercentage: 80,
legend: {
display: false
},
tooltips: {
enabled: false,
},
} 我想要所有的标签和图例完全消失，这样我就可以定义我的HTML，CSS和自定义javascript 以下是所发生情况的屏幕截图 mess
浏览 10提问于2019-05-14得票数 0
回答已采纳
1回答
我正在为使用ChartJS生成的线条图创建一个图例。我遇到的问题是图例中的颜色框没有正确排列。下面是我生成传奇的方式：
var chartLegend = "<ul style=\"list-style-type: none;\">";
for(var i = 0; i < chartDatas.datasets.length; i++)
{
chartLegend += "<li><div style=\"background-color:" + chartDatas.datasets[i].
浏览 2提问于2015-06-03得票数 0
回答已采纳
1回答
我使用的是ChartJS，但由于某些原因，我无法显示图例。这是html结构： <canvas id="trend_chart"></canvas> 下面是js的配置： var chart_labels = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC&
浏览 23提问于2019-02-13得票数 0
回答已采纳
有两个图表和一个共同的图例在一页。此图例可单击以显示/隐藏图表行。这是分叉。
我试图更新以上代码中的数据。这是一种不完善的方式，但我已经能够更新图表。“图例”文本将隐藏/显示中的线条图。
但是，在更新数据之后，此切换函数无法工作。
请试试。
点击“图例”，它会显示并隐藏图形线->确定。
单击"ChangeData“按钮，图形行将被更改-->确定
再次点击“图例”，不消失图形线->NG。
首先，它调用DrawChart函数，它为参数绘制数据。
window.onload = function () {
DrawChart(data_A1, data
浏览 0提问于2019-09-10得票数 0
我已经用ChartJS设置了一个堆叠条形图，但是在定位工具提示时有一些问题。如果数据集重叠(堆栈)，则工具提示垂直关闭。，这是ChartJS中的一个bug，还是我设置的错误？
请参见的示例
注意，在图表的右侧，工具提示是正确的，在那里，条形和线条不重叠。但在左手边(数据集A、C和E)会出现问题。特别是wrt数据集E(线图)。
但是，如果数据集被隐藏/禁用(单击图表图例)，从而避免了重叠，那么工具提示就会变得正确。例如，尝试禁用数据集A和C以修复E。
浏览 0提问于2016-05-26得票数 0
我正在使用react-chartjs-2为我的应用程序创建折线图。
对于这个应用程序，我做了一个图例定制，我可以使用以下代码生成它们：
// Chart component
<Line ref={ (chart) => chart ? this.insertLegends(chart) : null }
data={this.state.chart}
options={this.state.options}
/>
// Method which insert the html content
insertLegends(chart) {
浏览 1提问于2017-10-04得票数 0
我正在使用vue-chartjs和chartjs-plugin-colorschemes来设计一个圆环图的样式。我试着让用户选择他们喜欢的主题。我有它90%的工作；用户可以选择一个主题，点击更新，甜甜圈加上它的标签正确地改变颜色。不起作用的是，在初始页面加载时，甜甜圈有配色方案，但图例没有。 我目前正在传递一个默认的主题作为道具，并且我正在使用一个watch方法来观察主题的变化。该错误发生在此watch方法内部。 如何动态更新图例标签颜色？下面是我的组件的一个最小示例： <script>
/* eslint-disable no-new */
import convert
浏览 22提问于2020-12-03得票数 0
回答已采纳
我正在使用react chartjs 2。我需要增加图例和图表之间的差距。在这里，我发现了许多不适用于react或nextjs的解决方案。这就是为什么我需要用反应环境来解决它。请帮帮我。
这是我的密码-
import { Box, Typography } from "@mui/material";
import { Line } from 'react-chartjs-2';
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
PointElement,
Line
浏览 13提问于2022-02-27得票数 2
回答已采纳
1回答
我正试图将Legend与我的Chart在ChartJS图中分开。当使用“默认”图例时，无法控制图表区域的大小，而且它会随着我在图例中有更多的项目而变小.
如果可以在不改变Legend大小的情况下扩展Chart Area，那么我很想听听任何这样做的人:)
我正在尝试的另一个选项是创建一个自定义Legend并将其作为innerHTML插入，并隐藏默认的图例。
我尝试了使用legendCallback的解决方案，如：
但他们都不适合我..。不知道为什么，我完全按照他们说的做了。
我认为这可能是ChartJS的版本(我正在使用最新版本)，或者是其他一些数据问题，阻碍了图例的显示。
我的代码：
v
浏览 3提问于2021-09-22得票数 0
1回答
ChartJS数据溢出图表区域
、、、、
我有一个用ChartJS创建的图表，它在折线图中显示数据集( (x，y)对)。根据用户请求，我为用户添加了更改X-max和Y-max值的功能。在数据集溢出图表区之前，一切都很好。
这位于图表右侧图例下方的空白处。正如您所看到的，线条不再跟随这些点，直到它们被画布区域裁剪为止。
我希望使用图表区域而不是画布区域来裁剪或遮罩可见数据。在ChartJS中有这样做的设置吗？
编辑:澄清标题
浏览 2提问于2016-11-03得票数 0
1回答
我们将Chartjs用于某些图形，但可裁剪图例框存在问题，因为它们在某些情况下会显示，而在其他情况下不会显示，如以下快照所示：
我们观察到的显示这些框的情况是页面在最小化的同时自动刷新。
有没有人能告诉我们这里出了什么问题？
提前谢谢你
浏览 0提问于2017-07-04得票数 0
1回答
我动态地创建了我的图表传奇。
我希望我的图表能够垂直展开以适应父图，我在图表选项中使用maintainAspectRatio: false属性来实现这一点。
我也希望我的图例和图表适合在父容器中。问题是，chartjs没有看到动态生成的图例，而是给图表提供了一个height of 480px。这意味着图例被推到父容器之外而不是安装在其父容器中。
下面是一个提示问题的小提琴手：
我如何动态地生成一个图例，但也告诉chartjs要考虑它的高度，这样它就不会将图例推到容器之外？
Javascript：
var data = {
labels: ["January",
浏览 2提问于2017-11-02得票数 0
回答已采纳
我使用的是chartjs-plugin-datalabels，在大图表中显示较小的数据集时，值会重叠。
下面是chartjs-data-plugin配置
options: {
plugins: {
datalabels: {
color: 'black',
clamp:true,
display: function(context) {
return contex
浏览 7提问于2020-01-19得票数 6
我正在尝试隐藏使用Chart.js创建的图表的图例。 根据官方文档(https://www.chartjs.org/docs/latest/configuration/legend.html)，要隐藏图例，必须将options.display对象的display属性设置为false。 我试着用下面的方法去做： const options = {
legend: {
display: false,
}
}; 但它不起作用，我的传奇还在那里。我甚至尝试了另一种方法，但不幸的是，没有成功。 const options = {
legend: {
浏览 26提问于2021-08-02得票数 0
我试图在stackblitz中创建一个angular6 Primeng 6应用程序。我用的是PrimeNg图表。此外，我还想添加使用chartjs-plugin-datalabels和chartjs-plugin-funnel。我可以使用ChartJs和chartjs插件数据标记，但无法找到如何使用chartjs-plugin-funnel.。
我的Stackbliz
浏览 0提问于2018-10-13得票数 0
回答已采纳
1回答
我一直在寻找一种使用Chartjs绘制这个图表的方法，但一直没有成功。这在Chartjs中是可能的吗？
下面是我的设置：
const stacked_bar_data = {
labels: ['Axi-cel', 'Tisa-cel'],
datasets: [
{
label: 'Bridging therapy 2',
data: [25, 25],
backgroundColor: ['rgb(224, 178, 40)', 'rgb(78
浏览 0提问于2021-06-09得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议活动推荐
腾讯云开发者
