是否可以在chartjs中隐藏某些数据集图例?

ecr0jaav  于 2023-01-26  发布在  Chart.js
关注(0)|答案(5)|浏览(315)

是否可以在chartjs中只隐藏某些数据集图例?我知道可以使用隐藏所有图例

  1. options: {
  2. legend: {
  3. display: false
4zcjmb1e

4zcjmb1e1#

简短回答:* * 是的,这是可能的。**不幸的是,它并不像开发人员所能做到的那么简单。
如果您知道图例中显示的项的text值是什么,那么您可以将其过滤掉。在阅读Chart.js文档后,我发现Legend Label Configuration一节详细介绍了一个filter函数,该函数可用于"过滤掉图例项",尽管此函数必须在父图表选项对象上设置,而不是作为数据集本身的选项:

  1. const chart = new Chart(ctx, {
  2. type: 'bar',
  3. data: data,
  4. options: {
  5. legend: {
  6. labels: {
  7. filter: function(item, chart) {
  8. // Logic to remove a particular legend item goes here
  9. return !item.text.includes('label to remove');
  10. }
  11. }
  12. }
  13. }
  14. });

现在,每次数据更改和图表通过chart.update()更新时都会显示此筛选器函数。
为了方便起见,我已经在一个jsfiddle中设置了这个,供您使用。

    • 注意:**此解决方案是围绕ChartJS版本2.7.1的API设计的。未来版本可能会改进对数据集图例标签的控制。
展开查看全部
omjgkv6w

omjgkv6w2#

First在chart.js docs下没有这个问题的官方例子。

如何按值过滤(隐藏大于1000的值的所有图例)

从图例中筛选图例项。接收2个参数,即图例项和图表数据。https://www.chartjs.org/docs/latest/configuration/legend.html#legend-label-configuration

基本示例-“像魔术一样工作”:

数据:

  1. var data = {
  2. labels: ["Africa", "Asia", "Europe"],
  3. datasets: [{
  4. label: "Population (millions)",
  5. backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f"],
  6. data: [1000,1500,2000]
  7. }]
  8. };

“窍门”-获取值数组:

  1. data.datasets[0]

这样我就得到了data数组。
下一步-filter循环抛出数据-每次我得到当前值index.基本数组思想:How to get value at a specific index of array In JavaScript?

  1. var index = legendItem.index; /* 0..1...2 */
  2. var currentDataValue = data.datasets[0].data[index]; /* 1000...1500...2000 */

如果是“概念”

显示所有图例:

  1. if (true){
  2. return true;
  3. }

这里隐藏了所有的传说

  1. if (false){
  2. return true;
  3. }

因此,添加任何您想要的if语句(在我们的例子中是数据值):

  1. if (currentDataValue > 1000){
  2. return true;
  3. }

完整示例:

如果值大于1,000则隐藏图例:

  1. var data = {
  2. labels: ["Africa", "Asia", "Europe"],
  3. datasets: [{
  4. label: "Population (millions)",
  5. backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f"],
  6. data: [1000,1500,2000]
  7. }]
  8. };
  9. var options = {
  10. responsive: true,
  11. title: {
  12. text: 'Hide africa legened (Greater than 1000)',
  13. position: 'top',
  14. display: true
  15. },
  16. legend: {
  17. display: true,
  18. labels: {
  19. /* filter */
  20. filter: function(legendItem, data) {
  21. /* filter already loops throw legendItem & data (console.log) to see this idea */
  22. var index = legendItem.index;
  23. var currentDataValue = data.datasets[0].data[index];
  24. console.log("current value is: " + currentDataValue)
  25. if (currentDataValue > 1000)
  26. {
  27. return true; //only show when the label is cash
  28. }
  29. },
  30. /* generateLabels */
  31. generateLabels(chart) {
  32. const data = chart.data;
  33. if (data.labels.length && data.datasets.length) {
  34. /* inner loop throw lables */
  35. return data.labels.map((label, i) => {
  36. var backgroundColor = data.datasets[0].backgroundColor[i];
  37. return {
  38. text: label + " | " + data.datasets[0].data[i],
  39. fillStyle: backgroundColor,
  40. // Extra data used for toggling the correct item
  41. index: i
  42. };
  43. });
  44. }
  45. return [];
  46. }
  47. },
  48. },
  49. scales: {
  50. xAxes: [{
  51. display: true
  52. }],
  53. yAxes: [{
  54. display: true
  55. }]
  56. }
  57. };
  58. new Chart(document.getElementById("chart"), {
  59. type: 'pie',
  60. data: data,
  61. options: options
  62. });
  1. <canvas id="chart" width="800" height="450"></canvas>
  2. <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>

顺便说一下,在上面的例子中,我也使用generateLabels的想法(添加旁边的标签文本的值)。

展开查看全部
9rnv2umw

9rnv2umw3#

针对Chart.js 3.x的更新

这个解决方案仍然有效,但图例选项已经被放置在“插件”中。因此,如果您不希望数据集的标 checkout 现在图例中,请给予它一个特定的名称,例如label: "none",然后使用filter函数:

  1. options: {
  2. plugins: {
  3. legend: {
  4. labels: {
  5. filter: item => item.text !== 'none'
  6. }
  7. }
  8. }
  9. }
r1zk6ea1

r1zk6ea14#

在我的例子中,将标签更改为“隐藏”会导致它显示在工具提示中,而不是我想要的文本。
因此,这里有一种方法,你可以通过它的索引号来定位每个数据集的图例,而不必改变标签!

  1. const chart = new Chart(ctx, {
  2. type: 'bar',
  3. data: data,
  4. options: {
  5. legend: {
  6. labels: {
  7. filter: function(item, chart) {
  8. return item.datasetIndex !== INDEX_OF_DATASET && item.datasetIndex !== INDEX_OF_ANOTHER_DATASET;
  9. }
  10. }
  11. }
  12. }
  13. });

在我的例子中,我使用wpDataTables在WordPress中创建一个图表,所以代码如下所示:

  1. wpDataChartsCallbacks[INDEX_OF_CHART_HERE] = function (obj) {
  2. obj.options.options.legend.labels.filter = function(item, chart) {
  3. return item.datasetIndex !== INDEX_OF_DATASET && item.datasetIndex !== INDEX_OF_ANOTHER_DATASET;
  4. }
  5. }

对我来说效果很好!

展开查看全部
brvekthn

brvekthn5#

    • 您可以使用类似下面的方法过滤图表中的图例:**
  1. plugins: {
  2. legend: {
  3. labels: {
  4. filter: function( item, chart){
  5. if (item.text == 'Open' || item.text == 'High') {
  6. return false;
  7. }else{
  8. return item;
  9. }
  10. }
  11. }
  12. },
  13. }

相关问题