是否可以在chartjs中只隐藏某些数据集图例?我知道可以使用隐藏所有图例
options: { legend: { display: false
4zcjmb1e1#
简短回答:* * 是的,这是可能的。**不幸的是,它并不像开发人员所能做到的那么简单。如果您知道图例中显示的项的text值是什么,那么您可以将其过滤掉。在阅读Chart.js文档后,我发现Legend Label Configuration一节详细介绍了一个filter函数,该函数可用于"过滤掉图例项",尽管此函数必须在父图表选项对象上设置,而不是作为数据集本身的选项:
text
filter
const chart = new Chart(ctx, { type: 'bar', data: data, options: { legend: { labels: { filter: function(item, chart) { // Logic to remove a particular legend item goes here return !item.text.includes('label to remove'); } } } } });
现在,每次数据更改和图表通过chart.update()更新时都会显示此筛选器函数。为了方便起见,我已经在一个jsfiddle中设置了这个,供您使用。
chart.update()
omjgkv6w2#
First在chart.js docs下没有这个问题的官方例子。
从图例中筛选图例项。接收2个参数,即图例项和图表数据。https://www.chartjs.org/docs/latest/configuration/legend.html#legend-label-configuration
基本示例-“像魔术一样工作”:
var data = { labels: ["Africa", "Asia", "Europe"], datasets: [{ label: "Population (millions)", backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f"], data: [1000,1500,2000] }] };
data.datasets[0]
这样我就得到了data数组。下一步-filter循环抛出数据-每次我得到当前值index.基本数组思想:How to get value at a specific index of array In JavaScript?
data
index
var index = legendItem.index; /* 0..1...2 */ var currentDataValue = data.datasets[0].data[index]; /* 1000...1500...2000 */
显示所有图例:
if (true){ return true; }
这里隐藏了所有的传说
if (false){ return true; }
因此,添加任何您想要的if语句(在我们的例子中是数据值):
if
if (currentDataValue > 1000){ return true; }
如果值大于1,000则隐藏图例:
var data = { labels: ["Africa", "Asia", "Europe"], datasets: [{ label: "Population (millions)", backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f"], data: [1000,1500,2000] }] }; var options = { responsive: true, title: { text: 'Hide africa legened (Greater than 1000)', position: 'top', display: true }, legend: { display: true, labels: { /* filter */ filter: function(legendItem, data) { /* filter already loops throw legendItem & data (console.log) to see this idea */ var index = legendItem.index; var currentDataValue = data.datasets[0].data[index]; console.log("current value is: " + currentDataValue) if (currentDataValue > 1000) { return true; //only show when the label is cash } }, /* generateLabels */ generateLabels(chart) { const data = chart.data; if (data.labels.length && data.datasets.length) { /* inner loop throw lables */ return data.labels.map((label, i) => { var backgroundColor = data.datasets[0].backgroundColor[i]; return { text: label + " | " + data.datasets[0].data[i], fillStyle: backgroundColor, // Extra data used for toggling the correct item index: i }; }); } return []; } }, }, scales: { xAxes: [{ display: true }], yAxes: [{ display: true }] } }; new Chart(document.getElementById("chart"), { type: 'pie', data: data, options: options });
<canvas id="chart" width="800" height="450"></canvas> <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
顺便说一下,在上面的例子中,我也使用generateLabels的想法(添加旁边的标签文本的值)。
generateLabels
9rnv2umw3#
针对Chart.js 3.x的更新
这个解决方案仍然有效,但图例选项已经被放置在“插件”中。因此,如果您不希望数据集的标 checkout 现在图例中,请给予它一个特定的名称,例如label: "none",然后使用filter函数:
label: "none"
options: { plugins: { legend: { labels: { filter: item => item.text !== 'none' } } } }
r1zk6ea14#
在我的例子中,将标签更改为“隐藏”会导致它显示在工具提示中,而不是我想要的文本。因此,这里有一种方法,你可以通过它的索引号来定位每个数据集的图例,而不必改变标签!
const chart = new Chart(ctx, { type: 'bar', data: data, options: { legend: { labels: { filter: function(item, chart) { return item.datasetIndex !== INDEX_OF_DATASET && item.datasetIndex !== INDEX_OF_ANOTHER_DATASET; } } } } });
在我的例子中,我使用wpDataTables在WordPress中创建一个图表,所以代码如下所示:
wpDataChartsCallbacks[INDEX_OF_CHART_HERE] = function (obj) { obj.options.options.legend.labels.filter = function(item, chart) { return item.datasetIndex !== INDEX_OF_DATASET && item.datasetIndex !== INDEX_OF_ANOTHER_DATASET; } }
对我来说效果很好!
brvekthn5#
plugins: { legend: { labels: { filter: function( item, chart){ if (item.text == 'Open' || item.text == 'High') { return false; }else{ return item; } } } }, }
5条答案
按热度按时间4zcjmb1e1#
简短回答:* * 是的,这是可能的。**不幸的是,它并不像开发人员所能做到的那么简单。
如果您知道图例中显示的项的
text
值是什么,那么您可以将其过滤掉。在阅读Chart.js文档后,我发现Legend Label Configuration一节详细介绍了一个filter
函数,该函数可用于"过滤掉图例项",尽管此函数必须在父图表选项对象上设置,而不是作为数据集本身的选项:现在,每次数据更改和图表通过
chart.update()
更新时都会显示此筛选器函数。为了方便起见,我已经在一个jsfiddle中设置了这个,供您使用。
omjgkv6w2#
First在chart.js docs下没有这个问题的官方例子。
如何按值过滤(隐藏大于1000的值的所有图例)
从图例中筛选图例项。接收2个参数,即图例项和图表数据。https://www.chartjs.org/docs/latest/configuration/legend.html#legend-label-configuration
基本示例-“像魔术一样工作”:
数据:
“窍门”-获取值数组:
这样我就得到了
data
数组。下一步-
filter
循环抛出数据-每次我得到当前值index
.基本数组思想:How to get value at a specific index of array In JavaScript?如果是“概念”
显示所有图例:
这里隐藏了所有的传说
因此,添加任何您想要的
if
语句(在我们的例子中是数据值):完整示例:
如果值大于1,000则隐藏图例:
顺便说一下,在上面的例子中,我也使用
generateLabels
的想法(添加旁边的标签文本的值)。9rnv2umw3#
针对Chart.js 3.x的更新
这个解决方案仍然有效,但图例选项已经被放置在“插件”中。因此,如果您不希望数据集的标 checkout 现在图例中,请给予它一个特定的名称,例如
label: "none"
,然后使用filter函数:r1zk6ea14#
在我的例子中,将标签更改为“隐藏”会导致它显示在工具提示中,而不是我想要的文本。
因此,这里有一种方法,你可以通过它的索引号来定位每个数据集的图例,而不必改变标签!
在我的例子中,我使用wpDataTables在WordPress中创建一个图表,所以代码如下所示:
对我来说效果很好!
brvekthn5#